Jquery.Form 非同期フォームの簡単な例 submit_jquery

http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#

1. ページにフォームを作成します。通常の形式で、特別なマークアップは必要ありません:

コードをコピー コードは次のとおりです: 名前: パスワード:

Jquery.Form コンポーネントなしフォームを送信すると、ページはブロック モードになり、サーバーからの応答を待ちます。 2. jQuery と Form Plugin JavaScript スクリプト ファイルを導入し、DOM のロード後にページがフォームを初期化できるようにするための簡単なコードをいくつか追加します。

// DOM がロードされるまで待機します $ (document).ready(function() { $('#myForm').ajaxForm(function() { alert("コメントありがとうございます!"); }); 🎜> jquery.form コンポーネントを追加すると、フォームの送信時にページが同期的に送信されなくなり、js によって非同期的に送信されるため、送信後にページが更新されなくなります。

3. サーバーと対話できるコールバック関数を追加します。

コードをコピー

コードは次のとおりです:

$(document).ready(function () { //options は ajaxForm の構成オブジェクトです。? var options = { //target: '#output1', // サーバー応答で更新されるターゲット要素 //beforeSubmit: showRequest, // 送信前コールバック success: callBackFunc // 送信後コールバック

// 他の利用可能なオプション: //url: url // フォームの 'action' 属性をオーバーライドする // type: type // 'get' または 'post'乗るフォームの 'method' 属性の場合 //dataType: null // 'xml'、'script'、または 'json' (予想されるサーバー応答タイプ) //clearForm: true // 成功後にすべてのフォームフィールドをクリアsubmit //resetForm: true // 送信が成功した後にフォームをリセットする

// ここでも $.ajax オプションを使用できます。例: //timeout: 3000 } ;

// 'ajaxForm' を使用してフォームをバインドします $('#myForm').ajaxForm(options); }); // responseText はサービス端末の応答値です。statusText は表面

// 提交状態态值，success 表示成功。 function callBackFunc(responseText, statusText) { if (statusText == 'success') { alert(responseText); }

その他{

alert(“服务端错误！”);

} }

結果が返される場合は、jsonデータベースの回调関数がこのように記述できます function resultFunction(responseText,statusText) { if (statusText == 'success') { if (responseText.code == 1) ) { アラート(responseText.message); } else { alert('エラーが発生しました!'); } } else { alter('服务器错误！'); } }

サービス端の代码如下： 复制代 代序如下: [HttpPost] public ActionResult AjaxForm(FormCollection form) { string message = "Name:" form["username"] " PWD: " form["パスワード"] ; //コンテンツ(メッセージ)を返します。 return Json(new { code = 1, message = message }); } 4. 提交前のデータベース校验関数数 は送信プロパティの前に追加されるオプションです 复制代码 代码如下: var options = { //target: '#output1', // サーバー応答で更新されるターゲット要素 beforeSubmit: checkData, // 送信前コールバック success: callBackFunc // 送信後のコールバック

// その他の利用可能なオプション: // url: url // フォームの「action」属性をオーバーライドする //type: type // 'get ' または 'post'、フォームの 'method' 属性をオーバーライドします //dataType: null // 'xml'、'script'、または 'json' (予期されるサーバー応答タイプ) //clearForm: true / / 送信成功後にすべてのフォームフィールドをクリアします。 //resetForm: true // 送信成功後にフォームをリセットします

// $.ajax オプションはここでも使用できます。例: //タイムアウト: 3000 }; // 送信前コールバック function checkData(formData, jqForm, options) { // formData は配列です。ここでは、$.param を使用して文字列に変換して表示します // ただし、フォーム プラグインはデータを送信するときにこれを自動的に行います //var queryString = $.param(formData);

// jqForm は、フォーム要素をカプセル化する jQuery オブジェクトです。 // フォームの DOM 要素にアクセスするには、次のようにします。 var formElement = jqForm[0];

//alert('送信しようとしています: nn' queryString);

// ここで false を返して、フォームが送信されないようにすることができます。 // false 以外を返すとフォームの送信を続行できます // true を返します。 if ($(formElement).find("#username").val() == "") { alter("ユーザー名を入力してください!"); false を返します。 } else { trueを返します。 } } ユーザー名が空かどうかを確認し、入力を促し、表の転送を取り消します。