AJAX提交表单数据实例分析
本文实例讲述了AJAX提交表单数据的方法。分享给大家供大家参考。具体如下：
varTINY={};
TINY.ajax=function(){
return{
/**
*@paramstringtype请求类型,post,get（目前只实现了这两种）
*@paramstrngurl请求的地址
*@paramobjectdata当使用post请求时的请求参数，ex:data=>{name:'adam'}
*@paramfunctioncallback成功返回时的回调函数
*/
call:function(type,url,data,callback){
varxhr=window.XMLHttpRequest?newXMLHttpRequest:newActiveXObject('Microsoft.XMLHTTP');//forie
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
callback.call(this,xhr.responseText);
}
}
switch(type.toUpperCase()){
case'POST':
xhr.open('POST',url,true);
//这句比较重要
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
varformData='';
for(variindata){
formData+=i+'='+data[i]+'&';
}
xhr.send(formData);
break;
default:
xhr.open('GET',url,true);
xhr.send(null)
break;
}
}
}
}();
遍历表单各元素，将参数值组织成JSON格式
这里对CheckBox复选框做了特殊处理，后台接收到的该值为所有复选框值用逗号的拼接
functionserialForm(form){
vare=form.elements;
varht=newArray();
varcheckbox=newArray();
for(vari=0;i<e.length;i++){
if(e[i].type=="checkbox"){
if(e[i].checked){
if(checkbox[e[i].name]!=null)checkbox[e[i].name].push(e[i].value);
elsecheckbox[e[i].name]=[e[i].value];
}
}else{
ht.push(e[i].name+":'"+e[i].value+"'");
ht.push(",");
}
}
for(vardddincheckbox){
ht.push(ddd+":'"+checkbox[ddd]+"'");
ht.push(",");
}
ht.push("nt:0");
returneval('({'+ht.join("")+'})');
};
AJAX的调用：
TINY.ajax.call('post','listfrom.do',serialForm(frm),function(data){
varret=eval('('+data+')');
if(ret.errid==0){
alert(ret.text);
window.location.reload();
}
else{
alert(ret.text);
}
});
谈到服务器端返回的JSON格式数据，支持如下格式
Stringstr="[{\"mailAddr\":\"edison@163.com\"},{\"mailAddr\":\"jay@263.com\"}]";
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(str);
前端调用
functionshow(){
$.post("listmail.do",{"name":"John"},function(data){
for(vari=0;i<data.length;i++){
alert(data[i].mailAddr);
}
},"json");
}
希望本文所述对大家的Ajax程序设计有所帮助。