Blogger Information
Blog 19
fans 0
comment 0
visits 10520
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4_10ajax和bootstrap
JcLi的博客
Original
504 people have browsed it

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>zuoye</title>
</head>
<body>
	<h2>用户登录</h2>
	<form>
		<p>用户名:<input type="text" name="name"></p>
	</form>
</body>
</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
	 //当失去焦点时时行验证
	 $(':input').blur(function(){
	 	// alert('通过')
	 	//使用ajax进行异步验证
	 	//全部参数写到$.ajax()参数中
		$.ajax({
			//请求的服务器资源,必须是字符串
			url: 'api/demo.php',
			//客户端的请求类型:GET,POST...,推荐大写
			type: 'GET',
			//从服务器端返回的数据类型格式:xml,html,json,txt等
			// dataType: 'json',
			//异步true,还是同步false(锁定浏览器)
			// async: true,
			//发送数据
			//1.查询字符串键值对,多个值之间用&连接
			// data: 'name='+$(':input').val(),
			//2.json格式
			// data: {'name':$(':input').val()},
			//3.当表单有多个字段时使用序列化方法可提高效率
			//将表单控件内容序列化为查询键值对格式
			// data: $('form:first').serialize(),
			//4.将表单控件内容序列化为json格式
			data: $('form:first').serializeArray(),
			//成功回调
			success: function(msg,status,xhr) {
				console.log(msg)
				$('p span').empty()
				$('p').append($(msg))
			}			
		})
	 })	
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄:

1.jpg2.jpg

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post