ajax2018年书籍,$.Ajax()无刷新验证-2018年4月10日

$.Ajax()无刷新验证(html)：

实例

html>

$.Ajax()无刷新验证

用户登录

用户名:

// $.ajax()

//    功能：是jquery中的ajax的底层方法，$.post() ,$.get()是他的快捷函数

//    语法:$ajax(type,url,dataType,cuccess,error)

//    参数：参数通常写到js对象字面量中

//当失去焦点的时候进行验证(blur验证事件)

$(':input').blur(function(){

// 语法1：将回调写到$.ajax()函数中

$.ajax({

//1.请求的服务器资源

url: 'api/demo.php',

//2.客户端的请求类型：get,post,put...

type: 'GET',

//3.从服务器返回的数据格式，类型：json,html,xml,txt(默认的)

// dataType: 'json',

// 4.异步或同步，true异步，false 同步(浏览器锁定)

// async: true,

//5.发送的数据：string，json,序列化

//查询字符串

data:'name='+$(':input').val(),

//6.成功回调函数：success:function(msg,status,xhr){}

success: function(msg,tatus,xhr){

$('p span').empty()

$('p').append($(msg))

}

//7.错误回调函数：error：function(xhr,status,error){}

})

})

运行实例 »

点击 "运行实例" 按钮查看在线实例

$.Ajax()无刷新验证(PHP)：

实例

//用数组来模拟数据库中已经存在的用户名，这些用户名是禁用使用的

$nameList=['admin','hello','happy'];

//当前用户提交的用户名

$userName = $_GET['name'];

//判断用户名是否为空

if(strlen(trim($userName)) == 0){

// 显示过滤空格，再判断字符串是否为空

echo  "用户名不能为空";

} else if(is_numeric($userName)){

// 判断是否为纯数字

echo "用户名不能为纯数字";

}else if(in_array($userName,$nameList)){

// 判断是否重复

echo "用户名已被注册";

}else{

echo "恭喜您，用户名可用";

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码：