jQuery Validator は、Ajax フォーム送信メソッドと Ajax パラメーター受け渡しメソッドを検証します (画像とテキストのチュートリアル)

この記事では、jQuery ValidatorでAjax送信フォームを検証する方法と、Ajaxでパラメータを渡す方法を中心に紹介しており、具体的なサンプルコードについては、こちらの記事を参照してください

。 serialize() メソッド フォーム値をシリアル化して、URL エンコードされたテキスト文字列を作成します。パラメーターを 1 つずつ渡す代わりに

以前の ajax パラメーター受け渡しメソッド

$.ajax({ 
        url : "${ctx}/SJStandardDamPartition/insertOrUpdateDamPartition", 
        type : "post", 
        dataType : "json", 
        data: {beginsectionid:function(){
              return $('#number option:selected').val();
            },
            beginelevation:function(){
              return $('#onset').val();
            },
            endelevation:function(){
              return $('#end').val();
            }
        }, 
        success : function(result) { 
        } 
      });

serialize() のパラメーター受け渡しメソッドを使用する

 var param = $("#standForm").serialize(); 
       $.ajax({ 
        url : "${ctx}/SJStandardStandardInfo/insertOrUpdateStandardInfo", 
        type : "post", 
        dataType : "json", 
        data: param, 
        success : function(result) { 
        } 
      });

少し複雑なビジネスをしている場合、複数のフォームが必要になる場合があります。同じページの、フォームの送信後にページを更新したりジャンプしたくない場合、私たちが考慮するのはフォームの Ajax 送信です。では、jQuery のバリデーター プラグインはどのようにして非同期に送信されたフォームも検証できるでしょうか。読み続けてみましょう。

ここでは、インターネットからの例を使用して説明します。

以下は、jquery .ajax 送信フォームの比較的一般的な書き方です

$("#submitButton").click(function(){ 
//序列化表单 
  var param = $("#leaveSave").serialize(); 
  $.ajax({ 
   url : "leaveSave.action", 
   type : "post", 
   dataType : "json", 
   data: param, 
   success : function(result) { 
if(result=='success') { 
location.href='allRequisitionList.action'; 
} else if(result.startWith("error_")){ 
$("#errorMessage").html(result.substring(6)); 
} else { 
//返回的结果转换成JSON数据 
var jsonObj = eval('('+result+')'); 
startTime = $("#startdate").val(); 
endTime = $("#enddate").val(); 
hour = jsonObj.hour; 
reason = jsonObj.reason; 
 
replaceDom(startTime,endTime,hour,reason); 
} 
} 
}); 
});

ajax を使用してフォームを送信し、検証に jquery の validate を使用したい場合は、次のように解決できます。 : フォームは通常どおりに書かれたフォームのコンテンツであり、タイプは依然として送信タイプですが、検証メソッドでは、フォームの送信に ajax が使用されます

$("#saveWorkExtra").validate({ 
onsubmit:true,// 是否在提交是验证 
onfocusout:false,// 是否在获取焦点时验证 
onkeyup :false,// 是否在敲击键盘时验证 
rules: { 
.... 
}, 
messages:{ 
.... 
}, 
submitHandler: function(form) { //通过之后回调 
   var param = $("#saveToWorkExtra").serialize(); 
   $.ajax({ 
url : "workExtraChange.action", 
type : "post", 
dataType : "json", 
data: param, 
success : function(result) { 
if(result=='success') { 
     location.href='allRequisitionList.action'; 
} else { 
     var jsonObj = eval('('+result+')'); 
} 
} 
   }); 
     }, 
     invalidHandler: function(form, validator) { //不通过回调 
    return false; 
     } 
});

上記は、皆さんのために私がまとめたものです、お役に立てれば幸いです未来のみんなへ。

関連記事:

Ajaxクロスドメインリクエストの原理(グラフィックチュートリアル)

dwz ajaxloadingを削除する方法(グラフィックチュートリアル)

Ajaxはnode js multerと連携してファイルアップロード機能を実装します

以上がjQuery Validator は、Ajax フォーム送信メソッドと Ajax パラメーター受け渡しメソッドを検証します (画像とテキストのチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。