使用JQuery 的 $.Ajax 异步请求表单提交
Ajax 参数及步骤
// 1.请求资源
url:'admin/reg.php',
// 2.请求类型
type:'POST',
// 3.返回的数据格式
dataType:'JSON',
// 4.异步还是同步
async:true,
// 5.发送的数据,这里使用JSON格式
data:{
'username':$("#username").val()
},
// 6.回调方法
success:function(msg,status,xhr){}
PHP 代码部分：
<?php
@header("Content-Type: text/html;charset=utf-8");
// 用数组模拟数据库数据
$nameList = ['admin','abc','php'];
// 获取注册页发送过来的用户名
$userName = $_POST['username'];
// 使用 in_array 判断数组中是否存在当前值
if(in_array($userName,$nameList)){
$status=0;
$reg_msg='<span id="msgs" style="color:red">用户名太抢手了,换一个</span>';
// 将返回的数据转为json
echo json_encode([
'status'=>$status,
'reg_msg'=>$reg_msg
]);
}else {
$status=0;
$reg_msg='ok'; //此返回的状态可自定义, 如：1 成功 2 失败 3 已经被注册 等等
// 将返回的数据转为json
echo json_encode([
'status'=>$status,
'reg_msg'=>$reg_msg
]);
}
?>JS 代码部分：主要使用JSON数据格式提交，将返回结果以动态添加标签插入元素之后进行提示，
$(document).ready(function(){
$("#username").blur(function(){
// 开始验证账号
if($("#username").val().length>0){
// 账号不为空才能继续下面的邮箱,密码等
// 如果输入是沌数字则不允许
if(isNaN($("#username").val())){
// 使用 JQuery 中的 $.Ajax() 进行验证
$.ajax({
// 1.请求资源
url:'admin/reg.php',
// 2.请求类型
type:'POST',
// 3.返回的数据格式
dataType:'JSON',
// 4.异步还是同步
async:true,
// 5.发送的数据,这里使用JSON格式
data:{
'username':$("#username").val()
},
// 6.回调方法
success:function(msg,status,xhr){
// console.log(msg['tips'])
var msgbox = msg['reg_msg'] //得到服务器返回的 JSON 数据对像中的成功值
//判断返回的状态码 ok = 成功
if(msgbox=='ok'){
$('<span id="msgs" style="color:green">恭喜,用户名可用</span>').appendTo($('#username').parent().before())
setTimeout(function(){
$(this).parent($('span').empty())
},2000)
}
}
})
}else{
//判断是否为纯数字
$(this).parent($('span').remove())
$('<span id="msgs" style="color:#FF6666">账号不能为纯数字!</span>').appendTo($(this).parent().before())
$("#username").focus()
//2秒后提示清空
}
}else{
//如果输入的内容为空，则动态添加提示符
$('#msgs').remove()
$('<span id="msgs" style="color:#FF6666">账号不能为空!</span>').appendTo($(this).parent().before())
$("#username").focus()
//2秒后提示清空
setTimeout(function(){
$('span').eq(0).empty()
},2000)
}
});
})CSS 代码部分：
.container{
width: 500px;
margin: auto;
border: 1px solid #ccc;
border-radius: 20px;
text-align: center;
margin-top: 20px;
}HTML 代码部分：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> <link rel="stylesheet" type="text/css" href="css/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="js/reg.js"></script> </head> <body> <form method="post"> <div class="container"> <p> <label for="username">账号：</label> <input type="text" name="username" id="username"> </p> <p> <label for="email">邮箱：</label> <input type="text" name="email" id="email"> <span></span> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password"> <span></span> </p> <p> <button>注册</button> <span id="msg"></span> </p> </div> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
