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中
[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>
[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>