实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax入门</title>
</head>
<body>
<!--<h2>Ajax</h2>-->
<form action ="api/check.php" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<lable for="email">邮箱：</lable>
<input type="text" name=""email" id="email">
</p>
<p>
<lable for="password">密码：</lable>
<input type="password" name="password" id="password">
</p>
<p><button >登录</button>
<span id="tips" style="font-size:1.2em;font-weight:bolder;color:red;"></span>
</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">
/**
*$.post()全局函数
*基本语法： $.post(url.data.success,dataType)
*参数说明：url:请求的地址：api/user.php?m=login
*data:需要发送到服务器的数据，以js对象方式进行包装
*success(data,status,xhl):执行成功的回调函数
*回调函数：data:从服务器返回的数据
*status:当前请求的状态
8xhr:ajax对象
*我们只关心data
* dataType:从服务大返回的数据格式
xml,html,script,json,text,_default
*/
//$('button:first').click(function(){
//alert(1)
// //1.提交地址
// var url='api/user.php?m=login'
//2 要提交的数据
// var data={
// 'email':$('#email').val(),
// 'password':$('#password').val()
// }
//3 执行回调
// 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)
//简化
$.post('api/user.php?m=login',
{
'email':$('#email').val(),
'password':$('#password').val()
},
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>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
if ($_GET['m'] == 'login') {
if ($_POST['email'] == 'admin@php.cn' && $_POST['password'] == '123456'){
echo '1';
}
else {
echo '0';
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
