ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。