jquery.form.js realisiert die Methode zum Konvertieren der Formularübermittlung in Ajax-Submission_jquery

Das Beispiel in diesem Artikel beschreibt die Methode von jquery.form.js, um die Formularübermittlung in eine Ajax-Übermittlung umzuwandeln. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Dieses Framework integriert die Funktionen zum Senden, Verifizieren und Hochladen von Formularen.
Dieses Framework muss mit der Vollversion von jquery kombiniert werden, andernfalls ist die Verwendung von min ungültig.
Prinzip: Verwenden Sie js, um das Formular in Ajax-URL und Daten zusammenzusetzen. Das Prinzip besteht immer noch darin, Ajax zum Senden zu verwenden. Tatsächlich können Sie es selbst schreiben, aber mit diesem Framework ist es möglicherweise einfacher.

1. Das einfachste Beispiel:

Schritt eins: js zitieren

<!--这里的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>

Schritt 2: Schreiben Sie das Formular auf die Seite

<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>

Schritt 3: Schreiben Sie js, um jquery.form.js aufzurufen, und senden Sie das Formular mit 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. Was sind die Werte im Optionsobjekt?

Es gibt mehrere häufig verwendete Hauptattribute:

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. So analysieren Sie die vom Server übergebenen JSON-Daten

Wir wissen, dass mit der von jquery bereitgestellten Ajax-Methode, wenn der Server JSON-Daten zurückgibt, diese in ein JSON-Objekt von js konvertiert werden können und dann der entsprechende Wert über json.xxx abgerufen werden kann. Was ist also mit diesem Rahmen?
1) Geben Sie zunächst dataType im Optionsparameter an: 'json'
2) Übermitteln Sie es über das Framework
3) Server empfängt
4) Der Server gibt json
zurück 5) Seite js empfängt json
Der Schlüssel ist der fünfte Schritt. Wie Sie JSON über JS empfangen, können Sie durchführen, indem Sie die folgenden Vorgänge innerhalb der durch success angegebenen Methode ausführen:

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

4. Wie führt man eine einfache Überprüfung über dieses Framework durch?

Apropos Verifizierung: Die Verifizierung muss innerhalb der beforeSubmit-Methode erfolgen, da diese Methode das jqform-Objekt und formData an Sie übergeben hat. Sie können diese beiden Parameter verwenden, um die entsprechende Eingabe zu erhalten, und diese dann selbst vornehmen Wenn das Urteil erfolgreich ist, reichen Sie es ein.

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

Klicken Sie hier für die Datei jquery.form.jsDownload von dieser Website.

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.