jQuery中使用ajax对表单数据进行异步验证
本文由发表于7年前 | Javascript | 暂无评论 |  被围观 11,166 views+

在网页中使用Ajax可以让网页的响应更快,通过异步地向服务器发送请求,不需要重新载入页面,提升了用户的体验。

在jQuery中使用Ajax基本格式为:

$('#button').click(function(){
	var data = $('.username').val();
	$.ajax({
		type:"POST",
		url:"validate.php",
		data: data,
		success: function(html) {
			$(#id).html(html);
		}
	});
	return false;
});

Type:定义了HTTP方法的字符串,可以是GET和POST类型,默认为GET;
url:需要访问的网页地址字符串;
data:一个map对象或者字符串,需要发送给服务器的数据;
success:回调函数,从服务器返回的数据会赋给这个回调函数的参数;
最后我们使用return false;从而抑制了浏览器的默认点击行为,因为这里是通过jQuery代码执行动作的。

下面就通过Ajax验证用户输入的数据,把结果显示在网页上:
首先是html表单如下:
<form id="register" method="post" action="">
	<span class="tips">请输入你的用户名:</span>
	<input type="text" name="username" class="username" />
		<span class="result"></span><br />
	<input type="submit" id="submit" />
</form>
jQuery代码如下:
$(document).ready(function() {
	$('.result').hide();
	$('#submit').click(function(){
		var username = $('.username').val();
		var data = 'username=' +username;
		$.ajax({
			type:"POST",
			url:"validate.php",
			data:data,
			success:function(html) {
				$('.result').show();
				$('.result').text(html);
			}
		});
		return false;
	});
});
服务器端执行脚本如下:
<?php
	$username = $_POST['username'];
	//正确的用户名由小写字母,数字和下划线组成
	if(!eregi("^[a-z0-9_]+$", $username)){
		echo "用户名格式不正确!".$username;
	} else {
		echo "恭喜,这是合法的用户名!";
	}
?>
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/using-jquery-ajax-asynchronous-data-validation-on-form.html
关键字: , , ,
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 5/13
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Java笔记 – RTTI 类型检查 instanceof 2013/12/24
2 Java Web笔记 – Servlet多线程同步问题及其解决方法 2011/11/10
3 jQuery插件实现的方法和原理简单说明 2012/8/8
4 使用Eclipse开发Java Web过程中Debug调试的使用方法 2011/9/10
5 Android中使用SAX解析XML文件 2011/7/12
6 Callable 和 Future实现线程等待 2012/7/30
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
猜您喜欢
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.