当前位置 : 主页 > 网络编程 > JavaScript >

【jquery】ajax实现用户名验证

来源:互联网 收集:自由互联 发布时间:2021-07-03
1.导入jQuery库 2.获取name="username"的节点:UserName 3.为username添加change响应函数 3.1.获取username的value属性值,去除前后前后空格且不为空,这边发送ajax请求 3.2.发送ajax请求检验username是否可用
1.导入jQuery库
2.获取name="username" 的节点:UserName
3.为username添加change响应函数
3.1.获取username的value属性值,去除前后前后空格且不为空,这边发送ajax请求
3.2.发送ajax 请求检验username是否可用
3.3.在服务端直接返回html的片段:<font color="red">用户名可用</font>
3.4.在客户端浏览器把服务端返回的结果之间添加到#message的html中

1. [代码][JavaScript]代码    

<script type="text/javascript">
$(function(){
	$(":input[name='username']").change(function(){
		var val=$(this).val();
		val=$.trim(val);
		if(val!=""){
			var url="url";
			var args={"username":val,"time":new Date()};
			$.post(url,args,function(data){
				$("#message").html(data);
			});
		}
	});
});
</script>

2. [代码][HTML]代码    

<body>
   <form action="" method="post">
     UserName:<input type="text" name="username"/><br/>
     <div id="message"></div><br/>
     <input type="submit" value="Submit"/>
   </form>
</body>
网友评论