Ajaxとコントローラのデータ交換

オリジナルリンクします。https：//www.cnblogs.com/kasi/p/8443289.html（侵略は削除しました）

1.コンセプト

コントローラのAjax SSMフレームで各種データとの間のデータ交換を実現し、戻り値は、Ajaxの二つの値から理解およびコントローラを通過さ

1.1从アヤックス→コントローラ

• コントローラで受信方法Ajaxの送信データを形成するものどんなにに違いはありません

 

オブジェクト	オペレーティング	キー/値の型	JSON	直列化されたフォーム
アヤックス	送信	データ：「名前=」+名	データ：{ "名前"：名}	データ：$（ "＃フォーム"）にserialize（）
コントローラ	レセプション	公共のボイド受信（文字列名）/（ユーザーユーザー）

 

1.2从コントローラ→アヤックス

• データのコントローラリターンJSONの種類は、追加する必要が@ResponseBody注釈を
• Ajaxの戻り値のデータは、任意の名前にすることができます

 

オブジェクト	オペレーティング	JSON
		POJOタイプ	マップタイプ
コントローラ	送信	メッセージを返します。	マップを返します。
アヤックス	レセプション	成功：機能（データ）{ 警告（data.result）

2例示します

 

 

• JSPフォーム

<フォームID = "フォームID"> 
    姓名：の<input type = "text"の名= "名前" ID = "名前"> <BR/> 
    年龄：の<input type = "パスワード" NAME = "通過" ID = "パス"> <BR/> 
    性别：の<input type ="ラジオ」NAME = "性別"値= "M"> 男
          >女<BR/> "F <INPUT TYPE = "ラジオ" NAME = "性別"値=" 
    爱好：の<input type = "チェックボックス" NAME = "趣味"値= "バスケットボール"> 篮球
         の<input type = "チェックボックス" NAME = "趣味"値= "サッカー"> 足球
         の<input type = "チェックボックス" NAME =」趣味"値= "pingpang">乒乓球<BR/> 
    地址：の<input type = "text"の名= "アドレス" ID = "アドレス"> <BR/> 

        <INPUT TYPE = "ボタン"値= "提交" ID = "のSendTo"> 
</フォーム>

値2.1のAjax

• モード：キー/値の値で
  • 一般的なタイプ納品書ボックスやその他の値は、ローカルシーケンスの最高と一緒に渡したい場合

    ます。<script type = "text / JavaScriptを"> 
        $（ "#sendto" ）.click（関数（）{
             // の値を取得 
            するvar名= $（ "＃名" .val）を（）; 
            VAR年齢 = $（「＃エイジ" ）.val（）; 
            VARセックス = $（" INPUT [タイプ= 'ラジオ'] " ）.val（）; 
            VARホビー = $（" INPUT [名= '趣味']：「にチェック）にserialize（。 ）;     // ここではボックス、マナー送信のシーケンスチェック 
            するvarアドレス= $（ "＃アドレスを" ）（）.valを; 
            $アヤックス（{ 
                URL： "toServer.do" 、
                種類： "POST" 、
                // 値のシーケンスを前に置かなければならない、と頭の変数に必要としない、または書式設定の問題が価値を獲得していることに注意してください
                データ：趣味+ "＆名=" +名+ "＆年齢=" +年齢+ "＆セックス=" +性別+ "＆アドレス=" + アドレス、     
                データ型： "JSON" 、
                成功：機能（データ）{ 
                    // 警告（data.result）。
                    警告（data.result）。
                } 
            }）
        }）
     </スクリプト>

     

• 第二の方法：JSON値によって

データのみの形式でキー/値データとJSONは異なっている（contentTypeのことをいくつかの情報を追加する必要があります：「アプリケーション/ jsonの;のcharset = UTF-8」が、私は値を追加しませんでしたが、渡すことができますが

//此处如果加入序列化后的复选框就传不过去,暂时还没弄清楚怎么将序列化后的值与json数据一起传,如果只是传复选框可以用"data:hobby,"这种方式

データ：{ "名前"：名前、 "年齢"：年齢、 "性別"：セックス、 "アドレス"：アドレス}、

 

• 三つの方法：シリアル化（推奨データ量）
  • ときに複雑なフォームに有用

ます。<script type = "text / javascriptの"> 
    $（ "#sendTo" ）.click（関数（）{ 
        $アヤックス（{ 
            URL： "toServer.do" 、
            種類： "ポスト" 、
            データ：$（「#formId "）.serialize（）   // 序列化表单 
            データ型：" JSON」、
            成功：関数（データ）{      // 返回值データ为{ "結果"： "提交成功"} 
                アラート（data.result）;    
            } 
        } ）
    }
 </ SCRIPT>

 

 

• 2.2コントローラの戻り値

  コントローラは、JavaBeanの別のタイプを受け、パラメータバインディングspringmvcの二つのタイプに値共通受信しました

  • 方法1：リターンにマップコレクション
    • 注：値が趣味の形チェックボックス趣味UserBeanのタイプに依存する文字列がカンマで区切られている場合、上を通過

      （「/ toServer.do」@RequestMapping ）
      @ResponseBody 
      パブリックマップ<文字列、文字列> sendString（ユーザーユーザー）{     // のJavaBeanと対応するユーザページ・パラメータ
           // マップセット戻り値格納するために使用される 
          地図<文字列、文字列> =マップ新しい新しい HashMapを<文字列、文字列> （）;
           IF（！ユーザー= ヌル）{ 
              map.put（ 、"正常に送信" "結果" ）; 
          } 他{ 
              map.put（ "結果"を、 "失敗したコミット" ） ; 
          } 
          返す地図; 
      }

       

  • 第二の方法：POJOリターン

    • POJOの戻りデータを定義します。

      パブリック クラスメッセージ{
           プライベート int型のコード;     // 戻り100、成功、失敗200が表す
          プライベート文字列MSGを;     // 返信メッセージ
          プライベートマップの<string、オブジェクト> =拡張新しい新規のハッシュマップの<string、オブジェクト>（）;     //はユーザを返しますデータブラウザ
      
          パブリック 静的メッセージ成功（）{ 
          メッセージ結果 = 新しい新しいメッセージ（）; 
          result.setCode（ 100 ）; 
          result.setMsg（「正常に処理」）;
           戻り結果; 
      } 
      パブリック 静的メッセージ失敗（）{ 
          メッセージ結果 =新しいメッセージ（）; 
          result.setCode（ 200 ）。
          result.setMsg（ "处理失败" ）;
          戻り値の結果; 
      } 
      
      公共メッセージの追加（文字列キー、オブジェクト値）{
           この。.getExtend（）PUT（キー、値）。
          返す これを。
      } 
      // 取得＆セット方法

       

    • コントローラ

      （ "/ toServer.doを" @RequestMapping ）
      @ResponseBody 
      公共メッセージsendString（ユーザユーザ）{ 
          System.out.printlnは（user.toString（））。
          もし（！ユーザー= ヌル）{
               リターンMsg.success（）; 
          } 他{
               リターンMsg.fail（）。
          } 
      }

      // ajax的success:function(data),data的返回值为{"code":100,"result":"成功"}

      /*此pojo可以使用return Msg.success.add("user",user)的方式向ajax返回实体对象 {"code":100,"msg":"处理成功","extend":{"user":{"name":"kasi","age":24,"sex":"m","hobby":null,"address":"中国"}}} */