Heim > Artikel > Web-Frontend > Ausführliche Erläuterung der Verwendung des JQuery-Formular-Plug-In-Formulars

Ausführliche Erläuterung der Verwendung des JQuery-Formular-Plug-In-Formulars

迷茫Original: 2017-01-24 15:27:431614Durchsuche

Herkömmliche Formularübermittlungen erfolgen alle in Form von Seitensprüngen, aber die Ajax-Übermittlung ist jetzt beliebter. Wenn Sie also die Einfachheit der Formularübermittlung und die Wirkung von Ajax nutzen möchten, gibt es eine Lösung?

Anwendung

Zwei Verwendungsmöglichkeiten:

Die erste Methode

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
  // 使用ajaxForm
  $(function(){
   $("#myForm").ajaxForm(function(){
    $("#output1").html("提交成功").show();
   })
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

Die zweite Methode

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
  $(function(){
   //方式二 与方式一效果一样
   $("#myForm").submit(function(){
    // 使用ajaxSubmit
    $(this).ajaxSubmit(function(){
     $("#output1").html("提交成功").show();
    });
    return false;
   })
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

Die erste Methode scheint bequemer zu sein.
Der Parameter function() ist die Rückruffunktion nach erfolgreicher Übermittlung.

Mit dieser Übermittlungsmethode kann eine asynchrone Formularübermittlung erreicht werden, was sehr praktisch ist. Es ist jedoch immer noch etwas unbefriedigend. Ich möchte es beispielsweise vor dem Absenden des Formulars überprüfen. Dies kann zwar manuell außerhalb der Formularübermittlungsaktion durchgeführt werden, ist jedoch sehr mühsam. Erbt das Formular-Plug-in diese Funktionalität?

2. Optionsparameter

Oben geht es nur um einen Funktionsrückruf-Funktionsparameter im Formular. Tatsächlich gibt es auch einen anderen Parameter, nämlich Optionen. Was ist der Nutzen?

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/jquery-form.js"></script>
 <script>
 
  var options = {
   target:&#39;#output1&#39;,   // 把服务器返回的内容放入id为output1的元素中
   beforeSubmit: fun1,   // 提交前的回调函数
   success:  fun2,   // 提交后的回调函数
   dataType:     // 接收服务端返回的类型 xml,scrpit,json
  };
 
  // beforeSubmit前可以作验证
  function fun1(formData,jqForm,options){
   // formData 提交值的数组对象
   // jqForm 表单元素的jQuery对象，jqForm[0]是其dom对象
   // 该函数如果返回false，则阻止表单提交
 
   // formData可以判断全部不为空的情况
   for(var i=0;i<formData.length;i++){
    if(!formData[i].value){
     alert("都不能为空");
     return false;
    }
   }
 
   // jqForm可以判断某个不为空的情况
   var form = jqForm[0];
   if(!form.name.value){
    alert("name不能为空");
    return false;
   }
 
   // fieldValue()可以获取多值的数组形式，如checkbox
   var value = $(&#39;input[name=name]&#39;).fieldValue();
   if(!value[0]){
    return false;
   }
  }
  function fun2(responseText, statusText){
   // 根据dataType不同responseText解析方式不同，
   // 默认  responseText
   // xml  responseXml以xml解析
   // json  responseJson
  }
 
  $(function(){
   //方式二 与方式一效果一样
   $("#myForm").ajaxForm(options); // 要想使options生效，需要作为参数传递
  })
 </script>
</head>
<body>
 <form id="myForm">
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="submit" value="提交">
  <div id="output1" style="display: none"></div>
 </form>
</body>
</html>

Es ist ersichtlich, dass wir in der Rückruffunktion fun1 von beforeSubmit drei Möglichkeiten haben, Formulardaten abzurufen: formData, jqForm und fieldValue, die verschiedene Möglichkeiten zum Abrufen von Werten erfüllen . Solange es false zurückgibt, kann es verhindern, dass das Formular gesendet wird. Der fun2 des Erfolgsrückrufs hat auch Statuswerte und gibt Daten vom Server zurück. Sie können damit umgehen, wie Sie möchten.

Stellungnahme：

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

Vorheriger Artikel：Einführung in die funktionale Programmierung in JavaScriptNächster Artikel：Einführung in die funktionale Programmierung in JavaScript

In Verbindung stehende Artikel

Mehr sehen