AJAX提交表单数据实例分析


            本文实例讲述了AJAX提交表单数据的方法。分享给大家供大家参考。具体如下：





var TINY={}; 

TINY.ajax = function() { 

 return { 

   /** 

   * @param string type 请求类型,post,get（目前只实现了这两种） 

   * @param strng url 请求的地址 

   * @param object data 当使用post请求时的请求参数，ex: data=> {name:'adam'} 

   * @param function callback 成功返回时的回调函数 

   */ 

  call : function(type, url, data, callback) { 

   var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject('Microsoft.XMLHTTP');// for ie 

   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'); 

    var formData = ''; 

    for ( var i in data) { 

     formData += i + '=' + data[i] + '&'; 

    } 

    xhr.send(formData); 

    break; 

   default: 

    xhr.open('GET', url, true); 

    xhr.send(null) 

    break; 

   } 

  } 

 } 

}(); 







遍历表单各元素，将参数值组织成JSON格式

这里对CheckBox复选框做了特殊处理，后台接收到的该值为所有复选框值用逗号的拼接





function serialForm(form){ 

 var e = form.elements; 

 var ht = new Array(); 

 var checkbox = new Array(); 

 for(var i = 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); 

    else checkbox[e[i].name] = [e[i].value]; 

   } 

  } else { 

   ht.push(e[i].name+":'"+e[i].value+"'"); 

   ht.push(","); 

  } 

 } 

 for (var ddd in checkbox ){ 

  ht.push(ddd + ":'" + checkbox[ddd] + "'"); 

  ht.push(","); 

 } 

 ht.push("nt:0"); 

 return eval('({' + ht.join("") + '})'); 

};



AJAX的调用：





TINY.ajax.call('post', 'listfrom.do', serialForm(frm), function(data){ 

  var ret = eval('('+data+')'); 

  if(ret.errid==0){ 

   alert(ret.text); 

   window.location.reload(); 

  } 

  else{ 

   alert(ret.text); 

  } 

});



谈到服务器端返回的JSON格式数据，支持如下格式





String str = "[{\"mailAddr\":\"edison@163.com\"}, {\"mailAddr\":\"jay@263.com\"}]";

response.setContentType("application/json;charset=UTF-8");

response.getWriter().write(str);





前端调用





function show(){ 

 $.post("listmail.do", {"name" : "John"}, function(data){

  for(var i = 0; i < data.length; i++){

   alert(data[i].mailAddr);

  }

 }, "json");

}







希望本文所述对大家的Ajax程序设计有所帮助。