jQuery结合Ajax实现简单的前端验证和服务端查询
2015-05-30 13:41
681 查看
上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始
和上篇文章一样,注意提示文字属性默认为:display:none;
然后页面需要添加jQuery库
最后编写查询按钮绑定的qingqiu()方法,实现非空验证和服务端异步查询
注释里面具体作用都已写明,然后简单的编写服务器端程序query.php,实现响应
第3行是编码,这个根据自己编码设置即可,高版本的php中,比如php5.3以上如果直接访问query.php没有参数值会报错,所以建议大家一定要加上参数为空的验证,当然实际验证会更复杂,如果请求值不为空那么会返回一个相同的值。
到现在整个过程就完毕了,测试结果看下图:
默认情况:
值为空时,同样是一个动态的过程:
然后随便输入一个值时,比如Hello!
那么响应的过程同样是动态的,如果服务器响应时间过长,那么下面会输入我们之前定义的"正在查询..."这样的提示,
具体内容就这些了,可以试一试哦
<form name="form2"> <label class="style1">请输入要查询的内容:</label> <br /> <br /> <input name="neirong" type="text" class="input1" /> <div style="display:none;" class="yanzhengtishi1">内容不能为空哦!</div> <input type="button" value="查 询" class="anniuxiaoguo" onclick="qingqiu()" /> </form> <!--下面div显示查询结果--> <div id="AjaxTishi"></div>
和上篇文章一样,注意提示文字属性默认为:display:none;
然后页面需要添加jQuery库
<script type="text/javascript" src="jQuery/jquery-1.11.1.min.js"></script>
最后编写查询按钮绑定的qingqiu()方法,实现非空验证和服务端异步查询
<script> //验证和查询部分 function qingqiu() { var data=document.form2.neirong; if(data.value==0){ //表单值为空时弹出提示 $(document).ready(function(){ $(".yanzhengtishi1").slideDown("slow"); }); data.focus(); //光标返回焦点 return false; }else{ //内容不为空滑动收起提示 $(document).ready(function(){ $(".yanzhengtishi1").slideUp("slow"); }); //然后执行异步请求 var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari建立对象 xmlhttp=new XMLHttpRequest(); } else { // 针对 IE6, IE5 建立对象 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { //响应提示 document.getElementById("AjaxTishi").innerHTML="正在查询..."; //输出查询结果 document.getElementById("AjaxTishi").innerHTML=xmlhttp.responseText; } } //向query.php服务端程序发送get请求 xmlhttp.open("GET","query.php?t=" + Math.random() + "&q=" + data.value,true); xmlhttp.send(); } } </script>
注释里面具体作用都已写明,然后简单的编写服务器端程序query.php,实现响应
<?php //接收请求 header('Content-Type:text/html; charset=utf-8'); if(empty($_GET['q'])){ //空值验证避免输出错误 echo "内容不能为空!"; }else{ $q=$_GET['q']; echo "返回值:".$q; } ?>
第3行是编码,这个根据自己编码设置即可,高版本的php中,比如php5.3以上如果直接访问query.php没有参数值会报错,所以建议大家一定要加上参数为空的验证,当然实际验证会更复杂,如果请求值不为空那么会返回一个相同的值。
到现在整个过程就完毕了,测试结果看下图:
默认情况:
值为空时,同样是一个动态的过程:
然后随便输入一个值时,比如Hello!
那么响应的过程同样是动态的,如果服务器响应时间过长,那么下面会输入我们之前定义的"正在查询..."这样的提示,
具体内容就这些了,可以试一试哦
相关文章推荐
- CSS jQuery HTML5 CSS3
- Jquery淡出效果
- jQuery实现复选框全选功能
- jquery的相关知识点
- jQuery实现tab功能
- jquery简单实现外部链接用新窗口打开的方法
- Jquery和JS获取ul中li标签
- JQuery里面金额的格式化
- 基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码
- 【玩转前端开发】jQuery中选择器详细介绍-01
- Javascript配合jQuery实现流畅的前端验证
- jQuery设计思想
- jQuery validate 验证隐藏域
- Jquery Uploadify3.21.与2.1版本 使用中存在的问题--记录三
- jquery判断checkbox是否选中及改变checkbox状态
- jquery简单实现外部链接用新窗口打开的方法
- jQuery实现给页面换肤的方法
- JQuery给网页更换皮肤的方法
- jQuery API中文文档
- jQuery plugins