jqueryフォームプラグインフォームの使い方を詳しく解説-jsチュートリアル-php.cn

jqueryフォームプラグインフォームの使い方を詳しく解説

迷茫

リリース： 2017-01-24 15:27:43

オリジナル

1680 人が閲覧しました

従来のフォーム送信はすべてページジャンプの形式で行われていましたが、現在は Ajax 送信の方が一般的です。フォーム送信のシンプルさと Ajax の効果を実現したい場合、何か解決策はありますか?

使い方

2つの使い方

1つ目の方法

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

ログイン後にコピー

2つ目の方法

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

ログイン後にコピー

1つ目の方法の方が便利な気がします。
パラメータ function() は、送信が成功した後のコールバック関数です。

この送信方法を使用すると、非同期のフォーム送信が実現でき、非常に便利です。ただし、まだ少し不十分です。たとえば、フォームを送信する前に確認することは、フォーム送信アクション以外でも手動で行うことができますが、非常に面倒です。フォームプラグインはそのような機能を継承しますか?

2. オプションパラメータ

上記は、フォーム内の 1 つの関数コールバック関数パラメータについてのみ説明しています。実際には、オプションという別のパラメータもあります。機能は何ですか？

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

ログイン後にコピー

beforeSubmit のコールバック関数 fun1 では、formData、jqForm、fieldValue の 3 つの方法で値を取得することができます。 false を返す限り、success コールバックの fun2 にはステータス値とサーバーからの戻りデータを任意に処理できます。