jQuery结合Ajax实现简单的前端验证和服务端查询

　　上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证，现在拓展一下，使用Ajax实现用户体验比较好的异步查询，同样还是从建立一个简单的表单开始

 1 <form name="form2">
 2         <label class="style1">请输入要查询的内容:</label>
 3         <br />
 4         <br />
 5         <input name="neirong" type="text" class="input1" />
 6         <div style="display:none;" class="yanzhengtishi1">内容不能为空哦！</div>
 7         <input type="button" value="查 询" class="anniuxiaoguo" onclick="qingqiu()" />
 8 </form>
 9 <!--下面div显示查询结果-->
10 <div id="AjaxTishi"></div>

和上篇文章一样，注意提示文字属性默认为：display:none;

然后页面需要添加jQuery库

<script type="text/javascript" src="jQuery/jquery-1.11.1.min.js"></script>

最后编写查询按钮绑定的qingqiu()方法，实现非空验证和服务端异步查询

 1 <script>
 2 //验证和查询部分
 3 function qingqiu()
 4 {
 5 var data=document.form2.neirong;
 6 if(data.value==0){
 7     //表单值为空时弹出提示
 8     $(document).ready(function(){
 9                     $(".yanzhengtishi1").slideDown("slow");
10                 });
11             data.focus();  //光标返回焦点
12             return false;
13 }else{
14     //内容不为空滑动收起提示
15     $(document).ready(function(){
16                 $(".yanzhengtishi1").slideUp("slow");
17             });
18     //然后执行异步请求
19     var xmlhttp;
20     if (window.XMLHttpRequest)
21     {
22     // IE7+, Firefox, Chrome, Opera, Safari建立对象
23     xmlhttp=new XMLHttpRequest();
24     }
25     else
26     {
27     // 针对 IE6, IE5 建立对象
28     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
29     }
30     xmlhttp.onreadystatechange=function()
31     {
32         if (xmlhttp.readyState==4 && xmlhttp.status==200)
33         {
34            //响应提示
35             document.getElementById("AjaxTishi").innerHTML="正在查询...";
36           //输出查询结果    document.getElementById("AjaxTishi").innerHTML=xmlhttp.responseText;
37         }
38     }
39     //向query.php服务端程序发送get请求
40     xmlhttp.open("GET","query.php?t=" + Math.random() + "&q=" + data.value,true);
41     xmlhttp.send();
42     }
43 }
44 </script>

注释里面具体作用都已写明，然后简单的编写服务器端程序query.php，实现响应

 1 <?php
 2 //接收请求
 3 header(‘Content-Type:text/html; charset=utf-8‘);
 4 if(empty($_GET[‘q‘])){
 5         //空值验证避免输出错误
 6     echo "内容不能为空！";
 7 }else{
 8     $q=$_GET[‘q‘];
 9     echo "返回值：".$q;
10 }
11 ?>

第3行是编码，这个根据自己编码设置即可，高版本的php中，比如php5.3以上如果直接访问query.php没有参数值会报错，所以建议大家一定要加上参数为空的验证，当然实际验证会更复杂，如果请求值不为空那么会返回一个相同的值。

到现在整个过程就完毕了，测试结果看下图：

默认情况：

值为空时，同样是一个动态的过程：

然后随便输入一个值时，比如Hello!

那么响应的过程同样是动态的，如果服务器响应时间过长，那么下面会输入我们之前定义的"正在查询..."这样的提示，

具体内容就这些了，可以试一试哦