jQuery Validator が Ajax フォームの送信を検証する方法と、Ajax がパラメーターを渡す方法の詳細な例-PHPチュートリアル-php.cn

jQuery Validator が Ajax フォームの送信を検証する方法と、Ajax がパラメーターを渡す方法の詳細な例

小云云

リリース： 2023-03-18 11:26:01

オリジナル

1703 人が閲覧しました

この記事では主に、Ajax 送信フォームを検証するための jQuery Validator の方法と、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 を使用したい場合は、次のように解決できます。通常どおりに作成されたフォームのコンテンツであり、タイプは submit タイプのままです。検証に合格した後、ajax を使用して validate メソッドでフォームを送信するだけです

$("#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; 
     } 
});

ログイン後にコピー