实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.ajax的jquery实现$(.post())</title>
</head>
<body>
<form action="api/check.php" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="email">邮箱：</label>
<input type="text" name="email" id="email">
</p>
<p>
<label for="password">密码：</label>
<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="./js/jquery-3.3.1.js"></script>
<script type="text/javascript">
/**
* $.post()全局函数，处理ajax中的post请求
* 基本语法：$.post(url,data,success,dataType)
* url:请求的地址：api/user.php?m=login
* data:需要发送到服务器的数据，以JS对象方式进行包装
*
* success(data,status,xhr):执行成功的回调函数
* 回调函数：data:从服务器返回的数据
* status:当前请求的状态
* xhr:ajax对象
* 我们只关心data
* dataType:从服务器返回的数据格式
* xml,html,script,json,text,_defaut
*/
$('button:first').click(function(){
/**
//1.提交地址
var url = 'api/user.php?m=login'
2.要提交的数据
var data = {
'email':$('#email').val(), //注意：此处的 ，# 号定界符不能少，否则出错！
'password':$('#password').val()
}
//3.设置成功回调函数
var success = function(data){
if (res == '1') {
$('#tips').text('登录成功，正在跳转中。。。')
setTimeout(function(){
location.href = 'api/index.php'
}.2000)
} else {
$('#tips').text('邮箱或密码错误，请重新输入。。。')
// $('#tips').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";
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
