Question

AJAX完全小白，需求一AJAX异步表单验证用户信息是否在数据库中存在，教明白追加

Answer 1

我这可是现写的，一定要追加啊......

首先要去下载：http://code.jquery.com/jquery-1.7.2.min.js
这是地球人都在用的轻量级JS框架，安全可靠

form.html
<script language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script><!--引用jquery-->
<style>
ul{list-style:none;}
.reslstyle{ width:200px; height:22px;}
span.alert{ background:#FF5500; color:#FFF; font-size:12px; line-height:22px; margin-left:20px;}
</style>
<ul>
<li><input name="var_1" type="text" class="reslstyle check" /><span class="alert"></span></li><!--需要ajax验证的表单元素加check样式-->
<li><input name="var_2" type="text" class="reslstyle" /></li><!--这个没加check样式所以不会做检查-->
<li><input name="var_3" type="text" class="reslstyle check" /><span class="alert"></span></li>
</ul>

<script>
var checkFn = function(){
var target = $(this);//this是产生事件的控件句柄,target是个jquery对象
var target_name = target.attr('name');//取得控件name
var target_var = target.val();//取得控件输入值

var callback = function(return_data){//回调函数,用闭包方便一些,你也可以用其他形式处理服务端返回值

if(return_data['result'] == 1){//定于0说明已存在
target.next('span').show();//显示提示span
target.next('span').html(return_data['msg']);//给出提示，放在target(表单控件)后面的span中
}else{
target.next('span').hide();//隐藏提示span
}

}

//向服务器发送ajax请求验证表单信息
$.ajax({
type: "POST",
cache: false,//禁止缓存
dataType: 'json',//服务端返回json格式数据
url: "check.html",//服务端验证程序的地址
data: "name="+target_name+"&var="+target_var,//给验证程序传参
success: function(msg){
callback(msg);//取得返回值后调用回调函数,msg是服务端反馈的json数据解析后得到的map
return true;
}
});
}

$('.check').blur(checkFn);//为所有包含check样式的节点绑定失去焦点事件
</script>

check.html:
{"result":1,"msg":"变量已存在,请修改"}

上面那一行是模拟服务端的返回值测试用，可以收到name和var两个POST。服务端逻辑你自己处理吧

如果用UTF8尽量编码成：
{"result":1,"msg":"\u53d8\u91cf\u5df2\u5b58\u5728,\u8bf7\u4fee\u6539"}

还有问题的话可以密我