$.Ajax()无刷新验证(html):
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$.Ajax()无刷新验证</title> </head> <body> <form> <fieldset> <legend>用户登录</legend> <p> <label for="user">用户名:</label> <input type="text" name="name" id="user"> </p> </fieldset> </form> </body> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> // $.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){} }) }) </script> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
$.Ajax()无刷新验证(PHP):
实例
<?php //用数组来模拟数据库中已经存在的用户名,这些用户名是禁用使用的 $nameList=['admin','hello','happy']; //当前用户提交的用户名 $userName = $_GET['name']; //判断用户名是否为空 if(strlen(trim($userName)) == 0){ // 显示过滤空格,再判断字符串是否为空 echo "<span style='color:skyblue'>用户名不能为空</span>"; } else if(is_numeric($userName)){ // 判断是否为纯数字 echo "<span style='color:skyblue'>用户名不能为纯数字</span>"; }else if(in_array($userName,$nameList)){ // 判断是否重复 echo "<span style='color:skyblue'>用户名已被注册</span>"; }else{ echo "<span style='color:green'>恭喜您,用户名可用</span>"; }
运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码: