jQuery结合Ajax实现简单的前端验证和服务端查询
上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始
<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!
那么响应的过程同样是动态的,如果服务器响应时间过长,那么下面会输入我们之前定义的"正在查询..."这样的提示,
具体内容就这些了,可以试一试哦
jQuery结合Ajax实现简单的前端验证和服务端查询的更多相关文章
- 利用webuploader插件上传图片文件,完整前端示例demo,服务端使用SpringMVC接收
利用WebUploader插件上传图片文件完整前端示例demo,服务端使用SpringMVC接收 Webuploader简介 WebUploader是由Baidu WebFE(FEX)团队开发的一 ...
- jquery中ajax的简单使用
一.load() 这是最简单的一个函数,传入一个url他会异步加载该url的内容,然后将内容插入每一个选中的元素中,替换掉其中已经存在的内容. 所以最简单的用法是: $("#myDiv&qu ...
- 让 ASP.NET JS验证和服务端的 双验证 更简单
只用JavaScript验证安全不安全谁都知道,答案是不安全,非常的不安全.因为在客户端进行的验证相当于“让用户自己验证自己”,很明显是不靠谱的.你不能避免一些恶意用户人为的修改自己的表单进行欺骗,也 ...
- ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)
ASP.NET MVC通过Model验证帮助我们很容易的实现对数据的验证,在默认的情况下,基于ValidationAttribute的声明是验证被使用,我们只需 要将相应的ValidationAttr ...
- 使用AJAX技术发送异步请求,HTTP服务端推送
使用AJAX技术发送异步请求 什么是AJAX AJAX指一步Javascript和XML(Asynchronous JavaScript And XML),它是一些列技术的组合,简单来说AJAX基于X ...
- Netty实现一个简单聊天系统(点对点及服务端推送)
Netty是一个基于NIO,异步的,事件驱动的网络通信框架.由于使用Java提供 的NIO包中的API开发网络服务器代码量大,复杂,难保证稳定性.netty这类的网络框架应运而生.通过使用netty框 ...
- ajax提交表单+前端验证小示例
<script src="http://css.jj.cn/js/jquery.js" type="text/javascript"></sc ...
- jquery的ajax发送请求后前端不能实时更新
在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱(比如说多次请求却没有响应). 错误代码如下: $.get("fetch.php") .done(f ...
- 简单的同步Socket程序服务端
首先,Socket是.Net提供的 System.Net.Sockets命名空间的Scoket类为网络通信提供了一套丰富的方法和属性 服务器按照Socket的基本流程 先创建Socket 在用Bind ...
随机推荐
- Java基础-关键字-final
在Java中,final关键字可以用来修饰类.方法和变量(包括成员变量和局部变量).下面就从这三个方面来了解一下final关键字的基本用法. 1.修饰类 当用final修饰一个类时,表明这个类不能被继 ...
- 【UESTC 482】Charitable Exchange(优先队列+bfs)
给你n个物品交换,每个交换用r,v,t描述,代表需要用r元的东西花费t时间交换得v元的东西.一开始只有1元的东西,让你求出交换到价值至少为m的最少时间代价.相当于每个交换是一条边,时间为边权,求走到价 ...
- HTTP各个状态返回值
转载来自于:http://desert3.iteye.com/blog/1136548 502 Bad Gateway:tomcat没有启动起来 504 Gateway Time-out: nginx ...
- 浅议SNMP安全、SNMP协议、网络管理学习
相关学习资料 tcp-ip详解卷1:协议.pdf(重点看25章SNMP部分) http://www.rfc-editor.org/rfc/rfc1213.txt http://www.rfc-edit ...
- 《驾驭Core Data》 第三章 数据建模
本文由海水的味道编译整理,请勿转载,请勿用于商业用途. 当前版本号:0.1.2 第三章数据建模 Core Data栈配置好之后,接下来的工作就是设计对象图,在Core Data框架中,对象图被表 ...
- Java中各种(类、方法、属性)访问修饰符与修饰符的说明
类: 访问修饰符 修饰符 class 类名称 extends 父类名称 implement 接口名称 (访问修饰符与修饰符的位置可以互换) 访问修饰符 名称 说明 备注 public 可以被本项目的所 ...
- Protocol Buffer技术详解(Java实例)
Protocol Buffer技术详解(Java实例) 该篇Blog和上一篇(C++实例)基本相同,只是面向于我们团队中的Java工程师,毕竟我们项目的前端部分是基于Android开发的,而且我们研发 ...
- 分子量 (Molar Mass,ACM/ICPC Seoul 2007,UVa 1586)
解题思路: 1.将分子量用double 数组记录下来 2.将字符串存储在字符数组中,从头向后扫描,一直记住“字母”,对下一个字符进行判断,是否是数字,如果是数字:用一个整数记录,本代码中用的sum,同 ...
- go tool proof
echo list | go tool pprof -alloc_space gateway http://10.2.1.93:8421/debug/pprof/heap > abc.log e ...
- 基于TcpListener的web服务器
写在前面 上篇文章根据<asp.net 本质论>书上提供的例子,实现了一个简单的web服务器,本篇文章将介绍另一种实现方式——基于TcpListener的web服务器. TcpListen ...