http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. ページにフォームを作成します。通常の形式で、特別なマークアップは必要ありません: コードをコピー コードは次のとおりです: 名前:パスワード:<入力タイプ= " submit" value="submit async" id="lnkSubmit" /> Jquery.Form コンポーネントなしフォームを送信すると、ページはブロック モードになり、サーバーからの応答を待ちます。 2. jQuery と Form Plugin JavaScript スクリプト ファイルを導入し、DOM のロード後にページがフォームを初期化できるようにするための簡単なコードをいくつか追加します。 <br><script type="text/javascript" " src="path/to/form.js"> <br>// DOM がロードされるまで待機します <br>$ (document).ready(function() { $('#myForm').ajaxForm(function() { <br>alert("コメントありがとうございます!"); <br>}); 🎜></ head> <br>jquery.form コンポーネントを追加すると、フォームの送信時にページが同期的に送信されなくなり、js によって非同期的に送信されるため、送信後にページが更新されなくなります。 <br> <br>3. サーバーと対話できるコールバック関数を追加します。 <br><br><br><br><br>コードをコピー</p> <p><br> コードは次のとおりです:</p> <div class="codetitle"> <div class="codebody" id="code90447"> <br>$(document).ready(function () { <br> //options は ajaxForm の構成オブジェクトです。?<br> var options = { <br> //target: '#output1', // サーバー応答で更新されるターゲット要素 <br> //beforeSubmit: showRequest, // 送信前コールバック <br> <FONT color=#ff0000> success: callBackFunc // 送信後コールバック</ FONT> <br><br> // 他の利用可能なオプション: <br> //url: url // フォームの 'action' 属性をオーバーライドする <br> // type: type // 'get' または 'post'乗るフォームの 'method' 属性の場合 <br> //dataType: null // 'xml'、'script'、または 'json' (予想されるサーバー応答タイプ) <br> //clearForm: true // 成功後にすべてのフォームフィールドをクリアsubmit <br> //resetForm: true // 送信が成功した後にフォームをリセットする <br><br> // ここでも $.ajax オプションを使用できます。例: <br> //timeout: 3000 <br> } ; <br><br> // 'ajaxForm' を使用してフォームをバインドします <br> $('#myForm').ajaxForm(options); <br>}); <p> // responseText はサービス端末の応答値です。statusText は表面 </p> <p> // 提交状態态值，success 表示成功。 <br>function callBackFunc(responseText, statusText) { <br> if (statusText == 'success') { <br> alert(responseText); <br> } </p> <p> その他{ </p> <p> alert(“服务端错误！”); </p> <p> } <br>} </p> <p>結果が返される場合は、jsonデータベースの回调関数がこのように記述できます <br>function resultFunction(responseText,statusText) { <br> if (statusText == 'success') { <br> if (responseText.code == 1) ) { <br> アラート(responseText.message); <br> } <br> else { <br> alert('エラーが発生しました!'); <br> } <br> } <br> else { <br> alter('服务器错误！'); <br> } <br> } <br></p> </div> <br> サービス端の代码如下：<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="68420" class="copybut" id="copybut68420" onclick="doCopy('code68420')"><u>复制代</u></a></span> 代序如下:</div> <div class="codebody" id="code68420"> <br>[HttpPost] <br>public ActionResult AjaxForm(FormCollection form) <br>{ <br> string message = "Name:" form["username"] " PWD: " form["パスワード"] ; <br> //コンテンツ(メッセージ)を返します。 <br> return Json(new { code = 1, message = message }); <br>} <br> </div> <br>4. 提交前のデータベース校验関数数 <br> は送信プロパティの前に追加されるオプションです <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="7941" class="copybut" id="copybut7941" onclick="doCopy('code7941')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code7941"> <br>var options = { <br> //target: '#output1', // サーバー応答で更新されるターゲット要素 <br> <FONT color=#ff0000>beforeSubmit: checkData, // 送信前コールバック <BR></FONT> success: callBackFunc // 送信後のコールバック <br><br> // その他の利用可能なオプション: <br> // url: url // フォームの「action」属性をオーバーライドする <br> //type: type // 'get ' または 'post'、フォームの 'method' 属性をオーバーライドします <br> //dataType: null // 'xml'、'script'、または 'json' (予期されるサーバー応答タイプ) <br> //clearForm: true / / 送信成功後にすべてのフォームフィールドをクリアします。 <br> //resetForm: true // 送信成功後にフォームをリセットします <br><br> // $.ajax オプションはここでも使用できます。例: <br> //タイムアウト: 3000 <br> }; <br> // 送信前コールバック <br> function checkData(formData, jqForm, options) { <br> // formData は配列です。ここでは、$.param を使用して文字列に変換して表示します <br> // ただし、フォーム プラグインはデータを送信するときにこれを自動的に行います <br> //var queryString = $.param(formData); <br><br> // jqForm は、フォーム要素をカプセル化する jQuery オブジェクトです。 <br> // フォームの DOM 要素にアクセスするには、次のようにします。 <br> var formElement = jqForm[0]; <br><br> //alert('送信しようとしています: nn' queryString); <br><br> // ここで false を返して、フォームが送信されないようにすることができます。 <br> // false 以外を返すとフォームの送信を続行できます <br> // true を返します。 <br> if ($(formElement).find("#username").val() == "") { <br> alter("ユーザー名を入力してください!"); <br> false を返します。 <br> } else { <br> trueを返します。 <br> } <br> } <br> </div> <br> ユーザー名が空かどうかを確認し、入力を促し、表の転送を取り消します。</div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
