本实例通过使用Ajax方法实现对表单的无刷新验证
主页面DOM结构代码如下：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.Ajax_POST</title>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="email">邮箱:</label>
<input type="email" 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.js"></script>
<script type="text/javascript">
$('button:first').click (function(){
//设置提交地址
var url = 'api/user.php?m=login'
//需要提交的数据
var data = {
"email": $('#email').val(),
"password":$('#password').val()
}
//成功后的回调函数
var success = function(res){
if (res == 1){
$('#tips').text('登录成功，正在跳转。。。')
setTimeout(function(){
location.href = 'api/index.php'
},2000)
} else {
$('#tips').text('邮箱或密码错误，请重新输入。。。')
$('#email').focus()
setTimeout("$('#tips').empty",2000)
}
}
//设置返回的数据格式为'json'
var dataType = 'json'
$.post(url, data, success, dataType)
return false
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
验证脚本PHP代码如下：
实例
<?php
if ($_GET['m'] == 'login') {
if ($_POST['email'] == 'admin@php.cn' && $_POST['password'] == '123456'){
echo '1';
}
else {
echo '0';
}
}运行实例 »
点击 "运行实例" 按钮查看在线实例
本实例通过Ajax方法将表单数据在线提交至服务器验证脚本实现对表单数据的验证，然后主页面的JS通过验证脚本返回的数据将相应的提示信息显示在页面中。
