Ajax與Controller數據交互

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":"中國"}}}    */

來自爲知筆記(Wiz)