jquery.form.js réalise la méthode de conversion de la soumission de formulaire en ajax submit_jquery

L'exemple de cet article décrit la méthode de jquery.form.js pour convertir la soumission de formulaire en soumission ajax. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Ce framework intègre les fonctions de soumission, de vérification et de téléchargement de formulaires.
Ce framework doit être combiné avec la version complète de jquery, sinon l'utilisation de min ne sera pas valide.
Principe : utilisez js pour assembler le formulaire en url et données ajax. Le principe est toujours d'utiliser ajax pour le soumettre. En fait, vous pouvez l'écrire vous-même, mais cela peut être plus simple avec ce framework.

1. L'exemple le plus simple :

Première étape : citer js

<!--这里的min是自己用js压缩工具对完整版进行的压缩
并不是真正的min，所以好使-->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

Étape 2 : Écrivez le formulaire sur la page

<form id="showDataForm" 
action="/024pm/f_shopUser.do&#63;method=login" method="post">
 <input type="text" value="" name="name" maxlength="2"/>
 <input type="password" value="" name="password" maxlength="2"/>
 <input type="submit" value="提交"/>
</form>
<div id="output1" 
style="width:1000px;height:200px;background-color:#eee;">
</div>

Étape 3 : Écrivez js pour appeler jquery.form.js et soumettez le formulaire avec ajax

$(document).ready(function() {
 var options = {
  target: '#output1',
  // 从服务传过来的数据显示在这个div内部
 也就是ajax局部刷新
  beforeSubmit: showRequest,
 // ajax提交之前的处理
  success:  showResponse
 // 处理之后的处理
 };
 $('#showDataForm').submit(function() {
  $(this).ajaxSubmit(options);
  return false; 
  //非常重要，如果是false，则表明是不跳转
  //在本页上处理，也就是ajax，如果是非false，则传统的form跳转。
 });
});
function showResponse(responseText, statusText, xhr, $form) {
 alert(xhr.responseText+"=="+$form.attr("method")+'status: ' + 
 statusText + '\n\nresponseText: \n' + responseText);
//xhr：说明你可以用ajax来自己再次发出请求
//$form：是那个form对象，是一个jquery对象
//statusText：状态，成功则为success
//responseText，服务器返回的是字符串（当然包括html，不包括json）
}
function showRequest(formData, jqForm, options) {
 //formData是数组，就是各个input的键值map数组
 //通过这个方法来进行处理出来拼凑出来字符串。
 //formData：拼凑出来的form字符串，比如name=hera&password，
 //其实就是各个表单中的input的键值对，
 //如果加上method=XXXX，那也就是相当于ajax内的data。
 var queryString = $.param(formData);
 alert(queryString+"======"+formData.length);
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"==============="+formData[i].name);
 }
 //jqForm，jquery form对象
 var formElement = jqForm[0];
 alert($(formElement).attr("method"));
 alert($(jqForm[0].name).attr("maxlength"));
 //非常重要，返回true则说明在提交ajax之前你验证
 //成功，则提交ajax form
 //如果验证不成功，则返回非true，不提交
 return true;
}

2. Quelles sont les valeurs dans l'objet options ?

Il existe plusieurs attributs principaux couramment utilisés :

var options = {
 target: '#output1', 
 data:{param1:"我自己的第一个额外的参数"},
//这个参数是指通过ajax来给服务器提交除了form内部input的参数
//在后台中使用String param1=req.getParameter("param1");获取。
 // dataType: null,
 dataType:'json',
//这个参数值的是服务器返回的数据类型，默认的是null
//也就是服务器可以默认返回字符串，然后将这些字符串放在target内部
//当然还有json、xml，其中最常用的便是null和json
//对于json的使用，我们会稍后讲解到
 beforeSubmit: showRequest,
 success:  successRes，
 type：'POST'
 //提交方式，默认是自己在form标签上指定的method
 //如果没有指定，则使用get。
 url：''
 //重新提交的url，即url可以在form中配置
 //也可以在这里配置。
};

3. Comment analyser les données json transmises par le serveur

Nous savons qu'en utilisant la méthode ajax fournie par jquery, si le serveur renvoie des données json, elles peuvent être converties en un objet json de js, puis la valeur correspondante peut être obtenue via json.xxx. Alors qu’en est-il de ce cadre ?
1) Spécifiez d'abord dataType dans le paramètre options : 'json'
2) Soumettre via le framework
3) Le serveur reçoit
4) Le serveur renvoie json
5) La page js reçoit json
La clé est la cinquième étape. Comment recevoir json via js peut être effectué en effectuant les opérations suivantes dans la méthode spécifiée par success : :

var options = {
 target: '#output1', 
 dataType:'json',
 beforeSubmit: showRequest,
 success:  successRes
//注意了，successRes方法看起来并没有有参数
//但是为何下面的方法就能有参数了呢，是可以这么传递的。
function successRes(jsonData){
 alert(jsonData.param1);
}

4. Comment effectuer une vérification simple via ce cadre ?

En parlant de vérification, elle doit être vérifiée à l'intérieur de la méthode beforeSubmit. Comment vérifier, car cette méthode vous a transmis l'objet jqform et formData. Vous pouvez utiliser ces deux paramètres pour obtenir l'entrée correspondante, puis créer la sienne. jugement. Si le jugement est retenu, soumettez-le.

function showRequest(formData, jqForm, options) {
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"========"+formData[i].name);
 if (!formData[i].value) {
  //验证是否填写完整
  alert('input有没有填写的选项');
  //如果验证不通过，则返回false
  return false;
 }
 }
 var formElement = jqForm[0];
 alert($(jqForm[0].name).attr("maxlength"));
 return true;
}

Cliquez ici pour le fichier jquery.form.jsTéléchargez depuis ce site.

J'espère que cet article sera utile à la programmation jQuery de chacun.