Ajax and Controller data exchange

Original link: https: //www.cnblogs.com/kasi/p/8443289.html (invasion deleted)

1. Concept

Realize data exchange between various types of data at the Controller Ajax ssm frame, the return value is understood from Ajax two values ​​and pass Controller

1.1 从 Ajax → Controller

• No matter what form Ajax transmission data receiving method in the Controller makes no difference in

 

Objects	operating	key / value type	JSON	Serialized form
Ajax	send	data:"name="+name	data:{"name":name}	data:$("#form").serialize()
Controller	receive	public void receive(String name) / (User user)

 

1.2 从 Controller → Ajax

• Controller return Json types of data need to add @ResponseBodyannotations
• Ajax return value data can be any name

 

Objects	operating	JSON
		pojo type	map Type
Controller	send	return Msg;	return map;
Ajax	receive	success:function(data){ alert(data.result)

2. The example shows

 

 

• JSP form

<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 by value

• A mode: key / value by value
  • A common type delivery note box and other values ​​if you want to pass along with the best of the local sequence

    <script type="text/javascript">
        $("#sendTo").click(function () {
            //获取值
            var name = $("#name").val();
            var age = $("#age").val();
            var sex = $("input[type='radio']").val();
            Hobby var = $. ( "INPUT [name = 'Hobby']: the checked") the serialize ();     // here check box, the sequence of transmitting manner 
            var address = $ ( "address #" ) .val ();
            $.ajax({
                url:"toServer.do",
                of the type: "POST" ,
                 // Note that the sequence of values must be placed in the front, and do not need to head variable, otherwise there will be problems obtaining worth format 
                data: hobby + "& name = " + name + "& age =" + age + "Sex & =" Sex + + "& address =" + address,    
                dataType:"json",
                success:function (data) {
                    // alert(data.result);
                    alert(data.result);
                }
            })
        })
    </script>

     

• Second way: JSON by value

JSON with the key / value data only in the data format is different (need to add some information that contentType: "application / json; charset = utf-8", but I did not add value can pass

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

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

 

• Three ways: serialize (recommended data amount)
  • When complex forms useful

<script type="text/javascript">
    $("#sendTo").click(function () {
        $.ajax({
            url:"toServer.do",
            type:"post",
            Data: $ ( "#formId") the serialize (),.   // serialized form 
            dataType: "JSON" ,
            Success: function (data) {      // the return value data is { "result": "Submit Success"} 
                Alert (data.result);   
            }
        })
    }
</script>

 

 

• 2.2 Controller return value

  Controller received value common to two types of parameter bindings springmvc, receiving another type of JavaBean

  • Method 1: map collection to return
    • Note: The value depends on the form check box hobby userbean type of hobby, pass over when a String is a comma-separated

      @RequestMapping("/toServer.do")
      @ResponseBody
      public the Map <String, String> sendString (the User User) {     // User page parameters corresponding with the JavaBean
           // Map is used to store return values set 
          the Map <String, String> Map = new new the HashMap <String, String> ();
           IF (User! = null ) {
              map.put ( "the Result", "submit success" );
          }else {
              map.put ( "the Result", "Commit failed" );
          }
          return map;
      }

       

  • Second way: Pojo return

    • Define a return data for Pojo

      public  class Msg {
           Private  int code;     // returns 100 success, failure 200 represents 
          Private String MSG;     // return message 
          Private the Map <String, Object> = Extend new new the HashMap <String, Object> ();     // returns the user to data browser
      
          public static Msg success() {
          Msg result = new Msg();
          result.setCode(100);
          result.setMsg ( "treatment success" );
           return the Result;
      }
      public static Msg fail() {
          Msg result = new Msg();
          result.setCode(200);
          result.setMsg ( "treatment failure" );
           return Result;
      }
      
      public Msg add(String key,Object value) {
          this.getExtend().put(key, value);
          return this;
      }
      // GET method & the 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":"中国"}}} */