收藏
批改状态：未批改
老师批语：
总结：
实现跳转登录要以下的步骤：1获取提交按钮。 2设置提交的数据 3设置成功回调函数 4设置返回的数据格式 5调用全局函数$.post()
return false
步骤大概就是这个样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录跳转</title>
</head>
<body>
<form action="api/checkphp" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<leble for="email">邮箱：</leble>
<input type="text" name="email" id="email">
</p>
<p>
<leble for="password">密码：</leble>
<input type="password" name="password" id="password">
</p>
</fieldset>
</form>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('button:first').click(function () {
/** //1获取提交按钮
var url = 'api/user.php?m=login'
//2设置提交的数据
var data = {
'email':$('#email').var(),
'password':$('password').var()
}
//设置成功回调函数
var success = function(res){
if (res=='1') {
$('#tips').text('登录成功.正在加载...')
setTimeout(function()){
location.href = 'api/index.php'
},2000)
}else{
$('#tips').text('邮箱或密码错误，请重新输入...')
$('#email').focus()
setTimeout("tips.innerHTML = ''",2000)
}
}
//4设置返回的数据格式
var dataType = 'json'
//5调用全局函数$.post()
$.post(url, data, success, dataType)
return false
})
*/
//简写
$.post(
'api/user.php?m=login'
{
'email':$('#email').var(),
'password':$('password').var()
},
function(res){
if (res=='1') {
$('#tips').text('登录成功.正在加载...')
setTimeout(function()){
location.href = 'api/index.php'
},2000)
}else{
$('#tips').text('邮箱或密码错误，请重新输入...')
$('#email').focus()
setTimeout("tips.innerHTML = ''",2000)
}
}
)
return false
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="./style.css"> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="./drmo.js"></script> <title>Document</title> </head> <body> <div class="wrap"> <div class="header"> <h2>在线相册</h2> <p> <label for="img_ulr">请输入图片地址</label> <input type="text" name="img_ulr" id="img_ulr" placeholder="images/drmo.jpg" value="images/1.jpg"> </p> <p>请选择图片 <input type="radio" name="border" id="rect" value="0" checked=""><label>矩形</label> <input type="radio" name="border" id="rect" value="10%"><label>圆角</label> <input type="radio" name="border" id="rect" value="50%"><label>圆形</label> </p> <p> 图片是否添加阴影： <select name="shadow"> <option value="0" selected="">不添加</option> <option value="1">添加</option> </select> </p> <p><button class="add">添加图片</button></p> </div> <div class="main"> <ul></ul> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
实例实例
$(document).ready(function () {
$('button').eq(0).on('click',function){
//获取图片相关的信息
var img_ulr = $('#img_ulr').var()
//如果用户没有输入相关信息，提示用户
if (img_ulr.length==0) {
alert('请选择图片')
$('#img_ulr').focus()
return false
//获取图片类型
var img_type = $(':radio:checked').var()
//3是否添加阴影
var shadow='none'
if ($('selected').var()==1){
shadow = '3px 3px 3px #333'
}
//2创建图片元素，并把相关的属性添加上
var img = $('<img>')
.prop('src',img_ulr)
.width(150)
.height(150)
.css({
'border-radius':img_type,
'box-shadow':shadow
})
//给相册添加移动删除功能
var before = $('button').text('前移')
var after = $('button').text('后移')
var remove = $('button').text('删除')
//将三个按钮添加到图片中。append
var li = $('<li>').append(img, before, after, remove)
//将图片添加到页面中
li.appendTo('ul')
}
})
运行实例 »
点击 "运行实例" 按钮查看在线实例
.wrap{
width: 360px;
height: auto;
background-color: yellow;
border: 1px solid #333;
color: white;
}
.wrap .header{
padding: 5px;
}
.wrap .header h2{
text-align:center;
}
.aad{
width: 100px;
height: 30px;
border: none;
cursor: pointer;
background-color: red;
color: white;
}
.add:hover{
background-color: orange;
font-size: 1.2em;
}
.mian{
background-color: lightgreen;
overflow: hidden;
}
.main ul{
margin: 0;
padding: 0;
}
.main ul li{
list-style: none;
float: left;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 20px;
width: 200px;
height: 250px;
text-align: center;
}
运行实例 »
点击 "运行实例" 按钮查看在线实例点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
