Analyse d'exemples de données de formulaire de soumission AJAX-js tutoriel-php.cn

Analyse d'exemples de données de formulaire de soumission AJAX

亚连

Libérer： 2018-05-25 10:50:48

original

1723 Les gens l'ont consulté

Cet article présente principalement la méthode de soumission AJAX des données du formulaire. L'exemple analyse le principe et les compétences de mise en œuvre des appels Ajax. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit la méthode de soumission. Soumission AJAX des données du formulaire. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

var TINY={}; 
TINY.ajax = function() { 
 return { 
   /** 
   * @param string type 请求类型,post,get（目前只实现了这两种） 
   * @param strng url 请求的地址 
   * @param object data 当使用post请求时的请求参数，ex: data=> {name:&#39;adam&#39;} 
   * @param function callback 成功返回时的回调函数 
   */ 
  call : function(type, url, data, callback) { 
   var xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject(&#39;Microsoft.XMLHTTP&#39;);// for ie 
   xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == 200) { 
     callback.call(this, xhr.responseText); 
    } 
   } 
   switch (type.toUpperCase()) { 
   case &#39;POST&#39;: 
    xhr.open(&#39;POST&#39;, url, true); 
    // 这句比较重要 
    xhr.setRequestHeader(&#39;Content-type&#39;, &#39;application/x-www-form-urlencoded&#39;); 
    var formData = &#39;&#39;; 
    for ( var i in data) { 
     formData += i + &#39;=&#39; + data[i] + &#39;&&#39;; 
    } 
    xhr.send(formData); 
    break; 
   default: 
    xhr.open(&#39;GET&#39;, url, true); 
    xhr.send(null) 
    break; 
   } 
  } 
 } 
}();

Copier après la connexion

Parcourez chaque élément du formulaire et organisez les valeurs des paramètres au format JSON

Un traitement spécial est effectué ici pour la case à cocher CheckBox La valeur. reçues en arrière-plan sont toutes des valeurs complexes. La valeur du chapiteau est concaténée avec des virgules

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

Copier après la connexion

Appel AJAX :

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

Copier après la connexion

En ce qui concerne les données au format JSON renvoyées par le serveur, les formats suivants sont pris en charge

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

Copier après la connexion

Appel frontal

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

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.