AJAX submission form data example analysis

This article mainly introduces the method of AJAX submission of form data. The example analyzes the principle and implementation skills of Ajax calling. Friends in need can refer to the following.

The example of this article describes the method of AJAX submission of form data. Share it with everyone for your reference. The details are as follows:

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; 
   } 
  } 
 } 
}();

Traverse each element of the form and organize the parameter values ​​into JSON format

Special processing is done here for the CheckBox check box, and the value received in the background is for all check boxes The value is spliced ​​with commas

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+":&#39;"+e[i].value+"&#39;"); 
   ht.push(","); 
  } 
 } 
 for (var ddd in checkbox ){ 
  ht.push(ddd + ":&#39;" + checkbox[ddd] + "&#39;"); 
  ht.push(","); 
 } 
 ht.push("nt:0"); 
 return eval(&#39;({&#39; + ht.join("") + &#39;})&#39;); 
};

AJAX call:

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

When it comes to the JSON format data returned by the server, the following formats are supported

String str = "[{\"mailAddr\":\"edison@163.com\"}, {\"mailAddr\":\"jay@263.com\"}]";
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write(str);

Front-end call

function show(){ 
 $.post("listmail.do", {"name" : "John"}, function(data){
  for(var i = 0; i < data.length; i++){
   alert(data[i].mailAddr);
  }
 }, "json");
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

A brief analysis of the use of Ajax in Asp.net MVC

##JQuery Ajax dynamically generates Table tables

AJAX cross-domain request JSONP to obtain JSON data

The above is the detailed content of AJAX submission form data example analysis. For more information, please follow other related articles on the PHP Chinese website!