Heim > Web-Frontend > js-Tutorial > Hauptteil

Beispielanalyse für AJAX-Übermittlungsformulardaten

亚连
Freigeben: 2018-05-25 10:50:48
Original
1717 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die Methode der AJAX-Übermittlung von Formulardaten vor. Das Beispiel analysiert das Prinzip und die Implementierungsfähigkeiten von Ajax-Aufrufen.

Das Beispiel dieses Artikels beschreibt die Methode AJAX-Übermittlung von Formulardaten. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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; 
   } 
  } 
 } 
}();
Nach dem Login kopieren

Durchlaufen Sie jedes Element des Formulars und organisieren Sie die Parameterwerte im JSON-Format

Hier erfolgt eine spezielle Verarbeitung für das Kontrollkästchen CheckBox und den empfangenen Wert im Hintergrund ist für alle Kontrollkästchen Werte mit Kommas verbunden

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;); 
};
Nach dem Login kopieren

AJAX-Aufruf:

TINY.ajax.call(&#39;post&#39;, &#39;listfrom.do&#39;, serialForm(frm), function(data){ 
  var ret = eval(&#39;(&#39;+data+&#39;)&#39;); 
  if(ret.errid==0){ 
   alert(ret.text); 
   window.location.reload(); 
  } 
  else{ 
   alert(ret.text); 
  } 
});
Nach dem Login kopieren

Apropos JSON-Formatdaten, die vom Server zurückgegeben werden: Die folgenden Formate werden unterstützt

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

Front-End-Anruf

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

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Eine kurze Analyse der Verwendung von Ajax in Asp.net MVC

JQuery Ajax generiert dynamisch Tabellen

JSONP für domänenübergreifende AJAX-Anfrage zum Abrufen von JSON-Daten

Das obige ist der detaillierte Inhalt vonBeispielanalyse für AJAX-Übermittlungsformulardaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage