詳細フォームフォームAJAXベースの送信方法のためのjQuery

本論文では、AjaxのためのjQueryの例フォーム送信方法に基づいていないリフレッシュフォームを記述する。以下のように、ご参考のためにあなたに共有します：

まず、login.htmlページを作成します。

<！DOCTYPE htmlののPUBLIC " - // W3C // DTD XHTML 1.0過渡// EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTMLのxmlns = "HTTP ：//www.w3.org/1999/xhtml "> 
<ヘッド> 
 。<タイトル> $アヤックス（）方法发送请求</タイトル> 
 ます。<script type =" text / javascriptの"SRC =" JS / jqueryの-1.4。 1.js "> </ SCRIPT> 
 <スタイルタイプ="テキスト/ CSS "> 
  体
  { 
   フォントサイズ：13px; 
  } 
  .divFrame 
  { 
   幅：225px; 
   国境：固体1pxの第666位、
  } 
  .divFrame .divTitle 
  { 
   パディング：5pxの。
   背景色：#eee; 
   高さ：23px; 
  } 
  。
   パディング：2ピクセル。
   マージン右：3px;
   パディングトップ：5pxの; 
  } 
  .divFrame .divContent 
  { 
   パディング：8px。
   テキスト整列：センター; 
  } 
  .divFrame .divContent .clsShow 
  { 
   フォントサイズ：14px; 
   行の高さ：2.0em; 
  } 
  .divFrame .divContent .clsShow .clsError 
  { 
   フォントサイズ：13px; 
   国境：固体1pxの＃1 cc3300; 
   パディング：2ピクセル。
   表示：なし; 
   マージン下：5pxの; 
   背景色：＃ffe0a3。
  } 
  の.txt 
  { 
   ボーダー：＃666 1ピクセル固体。
   パディング：2ピクセル。
   幅：150ピクセル; 
  } 
  .btn 
  { 
   ボーダー：ソリッド1ピクセル＃666; 
   パディング：2ピクセル、
   幅は50px; 
  } 
 </スタイル> 
 <スクリプトタイプ= "テキスト/ JavaScriptを"> 
  $（関数（）{ 
   $（ "＃txtName"）フォーカス（。 ）; //入力フォーカス
   $（ "＃txtName"）のKeyDown（関数（イベント）{ 
    IF（event.which == "13がある"）{//リターンキー、カーソルは、パスワードボックスに移動します
     $（ "＃txtPass" ）.focus（）; 
    } 
   }）
   。$（ "＃txtPass"）KEYDOWN（関数（イベント）{ 
    IF（event.which == "13である"）{//リターンキー、フォームはアヤックスを用いて送信され
     （$ "#btnLogin"）トリガー（ "クリック"）;. 
    } 
   }）; 
   $（ "＃btnLogin"）。（関数（）{//「ログイン」ボタンをクリックしてイベントをクリックし
    、ユーザー名を取得します// 
    のvar strTxtName = encodeURI（$（ "#txtName「）ヴァル（））;. 
    //取得したパスワード 
    （。$（ "＃txtPass"）ヴァル（））= VAR strTxtPass encodeURI; 
    //は、データ送信を開始
    $のアヤックス
    （{//ログイン要求を処理ページの
     URL： "Login.aspxの"、//ログインプロセスのページ
     のdataType： "HTML"、
     //データ転送要求
     データ：{txtName：strTxtName、txtPass ：strTxtPass}、 
     機能（strValueに）{//ログインに成功する：成功返されるデータ
      戻り値の状態表示に基づいて// 
      （strValueに== "真"）場合 {// ませんtrueに、それが本当ます
       $（ "clsShow"）。HTML（ "操作のヒントは、成功したログイン！" + strValueに） ; 
      } 
      他{ 
       .. $（ "＃のdivError"）ショー（）HTML（ "ユーザー名またはパスワードが間違っ！" + strValueに）。
      } 
     } 
    }）
   }）
  }）
 </スクリプト>
</ head>の 
<BODY>
 <フォームID = "frmUserLogin">
 <DIV CLASS = "divFrame"> 
  <DIV CLASS = "divTitle"> 
   の<span>用户登录</スパン> 
  </ div> 
  <DIV CLASS = "divContent"> 
   <DIV CLASS = "clsShow"> 
    <DIV ID =」 divError "クラス= "clsError"> 
    </ div> 
    <div> 
     名称：<入力されたID = "txtName"タイプ= "テキスト"クラス= "TXT"/> </ div> 
    <div> 
     密码：<入力されたID =" txtPass "TYPE = "パスワード"クラス= "TXT"/> </ div> 
    <div> 
     <入力されたID = "btnLogin"タイプ= "ボタン"値= "登录"クラス= "BTN"/>   
     <入力されたID ="btnReset」TYPE = "リセット"値= "取消"クラス= "BTN" /> 
    </ div> 
   </ div> 
  </ div> 
 </ div> 
 </ FORM> 
</ BODY> 
</ HTML>

次に、Login.aspxの新しいは、受信したプロセスデータ：

ます。<％@ Page Language = "C＃" AutoEventWireup属性= "true"を分離コード= "Login.aspx.csは、" = "JSDemo.Login" ResponseEncoding = "2312" ％継承> 
<％ 
 （文字列STRNAME = System.Web.HttpUtility.UrlDecodeリクエスト[ "txtName"]）。
 ストリングstrPass = System.Web.HttpUtility.UrlDecode（リクエスト[ "txtPass"]）。
 ブールログイン=偽; 
 IF（STRNAME == "管理者" && strPass == "管理者"）
 { 
  ログイン= TRUE。
 } 
 のResponse.Write（ログイン）。
％>

補足：完全な例を提出するAJAXを使用して形成します。

//将形態转换为AJAX提交
 関数ajaxSubmit（URL、FRM、FN）{ 
  VAR dataPara = getFormJson（FRM）。
  $アヤックス（{ 
   URL：URL、
   種類： "ポスト"、
   データ：dataPara、
   非同期：falseの場合、
   データ型： 'TXT'、
   成功：FN 
  }）; 
 } 
 //将形態中的值转换为键值对
 機能getFormJson（FRM）{ 
  VAR 0 = {}; 
  するvar A = $（FRM）.serializeArray（）; 
  $ .each（関数（）{ 
   IF（O [this.name]！==未定義）{ 
    IF（！O [this.name] .push）{ 
     O [this.name] = [O [this.name ]]; 
    } 
    [this.name] .push（this.value || ''）、O、
   他} { 
    [this.name] O = this.value || ''; 
   } 
  }）。 
  戻り0;
 } 
/ * 
 //フォアグラウンドで呼び出される
 関数autoSubmitFun（）{ 
   ajaxSubmit（ "autoSumitScoreAJAX.action"、$（ '＃フォームID'）、機能（）{}）; 
 } 
* /

詳細フォームフォームAJAXベースの送信方法のためのjQuery

おすすめ