砂宛齐讳霓排金奈浚毁铆峰淀
/**
* $.ajax()
* 功能:是jquery中的Ajax底层方法,之前学过的$.get(),$.post…都它的特殊形式
* 语法: $ajax()
* 参数: 参数写到js对象字面量中
* 注:因参数众多,下面用实例进行说明
*/
ajax()实现无刷新验证:
demo3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.ajax()</title> </head> <body> <h2>用户登录</h2> <form> <p>用户名:<input type="text" name="name"></p> </form> </body> </html> <script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> //当失去焦点时时行验证 $(":input").blur(function(){ console.log('验证通过') }) </script>
执行,点击输入框,再讲鼠标移出输入框
语法1: 全部参数写到$.ajax()参数中
目录结构:
demo3.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.ajax()</title> </head> <body> <h2>用户登录</h2> <form> <p>用户名:<input type="text" name="name"></p> </form> </body> </html> <script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> //当失去焦点时时行验证 $(":input").blur(function(){ //语法1: 全部参数写到$.ajax()参数中 //数据格式为json 必须写到{}中 $.ajax({ //1.请求的服务器资源 url:'api/demo.php', //2.客户端的请求类型 type: 'GET', //3.从服务器返回时的数据格式:xml,html,json,txt等 dataType: 'json', //4.异步或者同步 异步true,还是同步false(锁定浏览器) 为可选参数 // async: true, //5.发送的数据:string json 序列化 //5-1.查询字符串键值对,多个值之间用&连接 data: 'name='+$(':input').val(), //6.成功的回调:success:function(msg,status,xhr){} //一般都只用第一个参数 success: function(msg,status,xhr) { console.log(msg) } //7.错误的回调:error:(xhr,status,error){} 一般不写 }) }) </script>
demo.php
<?php print_r($_GET); ?>
执行:
完整的验证案例:
demo3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.ajax()</title> </head> <body> <h2>用户注册</h2> <form> <p>用户名:<input type="text" name="name"></p> </form> </body> </html> <script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> //当失去焦点时时行验证 $(":input").blur(function(){ //语法1: 全部参数写到$.ajax()参数中 //数据格式为json 必须写到{}中 $.ajax({ //1.请求的服务器资源 url:'api/demo.php', //2.客户端的请求类型 type: 'GET', //3.从服务器返回时的数据格式:xml,html,json,txt等 // dataType: 'json', //4.异步或者同步 异步true,还是同步false(锁定浏览器) 为可选参数 // async: true, //5.发送的数据:string json 序列化 //5-1.查询字符串键值对,多个值之间用&连接 data: 'name='+$(':input').val(), //6.成功的回调:success:function(msg,status,xhr){} //一般都只用第一个参数 success: function(msg,status,xhr) { console.log(msg) $("p span").empty() $('p').append($(msg)) } //7.错误的回调:error:(xhr,status,error){} 一般不写 }) }) </script>
demo.php
<?php // 用数组模拟数据库中的已存在的用户名,这是不允许使用的 $nameList=['admin','mengmianren','php']; //这是当前用户提交的用户名 $userName=$_GET['name']; //判断用户名是否为空 if(strlen(trim($userName))==0) { echo "<span style='color:red;'>用户名不能为空</span>"; } //判断是否是纯数字 else if(is_numeric($userName)) { echo "<span style='color:red;'>不能为纯数字</span>"; } //检测用户名是否被注册 else if(in_array($userName, $nameList)) { echo "<span style='color:red;'>用户名已被注册</span>"; } //通过验证可以注册 else { echo "<span style='color:green;'>用户名可用</span>"; } ?>
执行:
注意:在demo.html中不要指定dataType: ‘json’, 而由浏览器自动识别,如果指定了,需要将php中的代码改为如下格式:
echo json_encode(“msg”=>”<span style=’color:red;’>用户名不能为空</span>”);
demo.php中直接echo返回的是纯文本
$.ajax()第二种语法格式,用得不多,但要看得懂
demo3.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.ajax()</title> </head> <body> <h2>用户注册</h2> <form> <p>用户名:<input type="text" name="name"></p> </form> </body> </html> <script type="text/javascript" src="../jquery/jquery-3.3.1.js"></script> <script type="text/javascript"> //当失去焦点时时行验证 $(":input").blur(function(){ //$.ajax()第二种语法格式,用得不多,但要看得懂 $.ajax({ url: 'api/demo1.php', type: 'GET', dataType: 'json', //序列化提交数据 data: $('form:first').serialize(), }) //done类似于成功的回调 .done( function(msg) { console.log(msg.tips) $('p span').empty() $('p').append($(msg.tips)) }) }) </script>
demo1.php
<?php $nameList = ['admin','mengmianren','php']; //这是当前用户提交的用户名 $userName = $_GET['name']; //判断用户名是否为空 if (strlen(trim($userName))==0) { $status = 0; $tips = '<span style="color:red">用户名不能为空</span>'; echo json_encode(['status'=>$status, 'tips'=>$tips]); } else if (is_numeric($userName)) { $status = 0; $tips = '<span style="color:red">用户名不能为纯数字</span>'; echo json_encode(['status'=>$status, 'tips'=>$tips]); } else if (in_array($userName, $nameList)) { $status = 0; $tips = '<span style="color:red">用户名已被注册</span>'; echo json_encode(['status'=>$status, 'tips'=>$tips]); } else { $status = 0; $tips = '<span style="color:green">用户名可用</span>'; echo json_encode(['status'=>$status, 'tips'=>$tips]); }
执行:
序列化的问题
当提交的数据很多的时候需要使用序列化
序列化:name=admin&password=123456&age=22&sex=1&hobby=….
提交的数据很多时,需要使用序列化
//序列化提交数据
data: $(‘form:first’).serialize(),
serialize()函数将这些数据打包,以字符串的形式发送给服务器
如果前端需要的是json数据,则需要使用serializeArray()进行序列化
韶推势竣搜链镀钝肛伴案挝鸥