Ajax與Controller數據交互

原文鏈接：https://www.cnblogs.com/kasi/p/8443289.html    （侵刪）

1.概念

在ssm框架下實現Ajax與Controller之間各種類型數據的數據交互,從Ajax傳值和Controller返回值兩個方面理解

1.1 從Ajax → Controller

• 無論Ajax以什么形式發送數據,在Controller中的接收方法都沒有差異

 

對象	操作	key/value類型	JSON	序列化表單
Ajax	發送	data:"name="+name	data:{"name":name}	data:$("#form").serialize()
Controller	接收	public void receive(String name) / (User user)

 

1.2 從Controller → Ajax

• Controller返回Json類型的數據需要加@ResponseBody注解
• Ajax的返回值data可以是任何名稱

 

對象	操作	JSON
		pojo類型	map類型
Controller	發送	return Msg;	return map;
Ajax	接收	success:function(data){ alert(data.result)

2. 實例說明

 

 

• JSP表單

<form id="formId">
    姓名:<input type="text" name="name" id="name"><br/>
    年齡:<input type="password" name="pass" id="pass"><br/>
    性別:<input type="radio" name="sex" value="m">男
         <input type="radio" name="sex" value="f">女<br/>
    愛好:<input type="checkbox" name="hobby" value="basketball">籃球
         <input type="checkbox" name="hobby" value="football">足球
         <input type="checkbox" name="hobby" value="pingpang">乒乓球<br/>
    地址:<input type="text" name="address" id="address"><br/>

        <input type="button" value="提交" id="sendTo">
</form>

2.1 Ajax傳值

• 方式一:key/value傳值
  • 普通類型傳遞需要注意復選框如果要和其他值一起傳最好將其局部序列化

    <script type="text/javascript">
        $("#sendTo").click(function () {
            //獲取值
            var name = $("#name").val();
            var age = $("#age").val();
            var sex = $("input[type='radio']").val();
            var hobby = $("input[name='hobby']:checked").serialize();    //此處為復選框,用序列化的方式傳遞
            var address = $("#address").val();
            $.ajax({
                url:"toServer.do",
                type:"post",
                //注意序列化的值一定要放在最前面,並且不需要頭部變量,不然獲取的值得格式會有問題
                data:hobby+"&name="+name+"&age="+age+"&sex="+sex+"&address="+address,    
                dataType:"json",
                success:function (data) {
                    // alert(data.result);
                    alert(data.result);
                }
            })
        })
    </script>

     

• 方式二:JSON傳值

JSON與key/value只有在data的數據格式不一樣(有些資料說需要加contentType:"application/json; charset=utf-8",但我沒加也可以傳值

//此處如果加入序列化后的復選框就傳不過去,暫時還沒弄清楚怎么將序列化后的值與json數據一起傳,如果只是傳復選框可以用"data:hobby,"這種方式

data:{"name":name,"age":age,"sex":sex,"address":address},

 

• 方式三:序列化(數據量大時推薦使用)
  • 復雜的表單時很有用

<script type="text/javascript">
    $("#sendTo").click(function () {
        $.ajax({
            url:"toServer.do",
            type:"post",
            data:$("#formId").serialize(),  //序列化表單
            dataType:"json",
            success:function (data) {     //返回值data為{"result":"提交成功"}
                alert(data.result);   
            }
        })
    }
</script>

 

 

• 2.2 Controller返回值

  Controller接收值常用的就兩種,一種是springmvc的參數綁定,另一種為JavaBean類型接收

  • 方式一:map集合返回
    • 注意:復選框hobby值的形式取決於userbean中的hobby類型,String類型時傳過來的值是逗號隔開的

      @RequestMapping("/toServer.do")
      @ResponseBody
      public Map<String,String> sendString(User user){    //user是與頁面參數對應的JavaBean
          //map集合用來存放返回值
          Map<String,String> map = new HashMap<String, String>();
          if(user != null) {
              map.put("result","提交成功");
          }else {
              map.put("result","提交失敗");
          }
          return map;
      }

       

  • 方式二:Pojo返回

    • 先定義一個用於返回數據的Pojo

      public class Msg {
          private int code;    //返回100表示成功,200表示失敗
          private String msg;    //返回提示信息
          private Map<String,Object> extend = new HashMap<String,Object>();    //用戶返回給瀏覽器的數據
      
          public static Msg success() {
          Msg result = new Msg();
          result.setCode(100);
          result.setMsg("處理成功");
          return result;
      }
      public static Msg fail() {
          Msg result = new Msg();
          result.setCode(200);
          result.setMsg("處理失敗");
          return result;
      }
      
      public Msg add(String key,Object value) {
          this.getExtend().put(key, value);
          return this;
      }
      //get&set方法

       

    • Controller

      @RequestMapping("/toServer.do")
      @ResponseBody
      public Msg sendString(User user){
          System.out.println(user.toString());
          if(user != null) {
              return Msg.success();
          }else {
              return 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":"中國"}}} */