SpringMVC ajax传参

AJAX前端请求数据处理

SpringMVC后台接受请求数据

SpringMVC对返回给前端数据处理

AJAX前端处理后台返回的数据

 

注意点：

1.ajax提交的参数说明

Datatype:

预期服务器返回的数据类型。如果不指定，jQuery将自动根据

HTTP包MIME信息来智能判断

"json": 返回 JSON 数据

"text": 返回纯文本字符串

ContentType:

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

Async:

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

Success:

请求成功后的回调函数。Function(a,b,c)有3个形参，a是返回的数据，b是”success”,c未知。形参的数目可以任意填写，按顺序加载实参

 

2.使用@ResponseBody注解的同时要导入

  jackson-core-asl-1.8.8.jar

  Jackson-mapper-asl-1.8.8.jar

该注解的功能才会生效

 

方式1：

ajax数据为url后缀的格式

 

注意：

这种方式，

提交方式使用POST时

contentType: "application/json; charset=utf-8",后台无法获取值

contentType:"application/x-www-form-urlencoded",后台可以获取值

当提交方式使用get时

两者都可以获取值

 

前台：

function ajaxTest1(){ 

     $.ajax({ 

     data:"name=小红&age=12", 

     type:"POST", 

     dataType: 'json', 

     url:"ajax/test1", 

     success:function(data){ 

        alert("success");

        alert(data.name);

        alert(data.age);

      },

     error:function(data){ 

         alert("fail"); 

     }

}); 

} 

 

后台：

@RequestMapping(value="ajax/test1") 

    public @ResponseBody Map<String,Object> login1(HttpServletRequest     request,HttpServletResponse response) throws IOException{ 

        System.out.println(request.getParameter("name")); 

        System.out.println(request.getParameter("age"));

        Map<String,Object> map = new HashMap<String,Object>(); 

        map.put("name",request.getParameter("name")); 

        map.put("age",request.getParameter("age"));

        return map; 

}

 

 

方式2：

Ajax数据为json格式

注意：

这种方式，

提交方式使用POST时

contentType: "application/json; charset=utf-8",后台无法获取值

contentType:"application/x-www-form-urlencoded",后台可以获取值。且中文不乱码

当提交方式使用get时

两者都可以获取值，但是中文乱码

 

前台：

 function ajaxTest2(){ 

  

        $.ajax({ 

        data:{"name":"小红","age":21},

        type:"POST", 

        dataType: 'json',

        url:"ajax/test2", 

        success:function(data){ 

          alert("success");

          alert(data.name);

          alert(data.age);

        },

         error:function(data){ 

            alert("fail"); 

        }

        }); 

    } 

 

后台：

    @RequestMapping(value="ajax/test2") 

    public @ResponseBody Map<String,Object> login2(HttpServletRequest     request,HttpServletResponse response) throws IOException{ 

        System.out.println(request.getParameter("name")); 

         System.out.println(request.getParameter("age"));

         Map<String,Object> map = new HashMap<String,Object>(); 

         map.put("name",request.getParameter("name")); 

         map.put("age",request.getParameter("age"));

         return map; 

} 

 

方式3：

Ajax数据为json转字符串

 

注意：

1.前台json数据的key必须和后台bean对应

所以以下清空会报错

var data = {"name":"小红","age":12,"sex":"女"};

var data = {"name":"小红","sex":"女"};

前台的json数据中key可以缺省

所以以下情况正确

var data = {"name":"小红"};

2.@RequestBody 不需要导入额外的jar包

3.contentType必须声明为"application/json;charset=utf-8",不然会报错

 

 

前台：

 function ajaxTest3(){ 

       var data = {"name":"小红","age":12};

       $.ajax({

         url: "ajax/test3",

         data: JSON.stringify(data),

         contentType: "application/json;charset=utf-8",

         type: "POST",

         success:function(data){ 

          alert("success");

          alert(data.name);

          alert(data.age);

        },

         error:function(data,b,c){ 

            alert("fail"); 

            alert(b);

        }

       });

  } 

 

 

后台：

@RequestMapping(value="ajax/test3") 

    public @ResponseBody Person  login3(@RequestBody  Person aa ) throws IOException{       

       System.out.println(aa);

        return aa;   

}

 

自定义一个Person类：

public class Person {

     private String name;

     private int age;

     public String getName() { return name;    }

     public void setName(String name) { this.name = name;    }

     public int getAge() { return age;    }

     public void setAge(int age) { this.age = age;    }

} 

 

方式4：

后台使用hashmap接受前段的值

 

方式5：

后台不使用@Respone自动转换json数据，而使用respone,write方法写入

//controller 采用@RequestParam 或 Request对象获取参数 ajax contentType为：application/x-www-form-urlencoded

//后台controller
@RequestMapping(value = "/login", method = RequestMethod.POST)
@ResponseBody
    public Map<String, Object> login(@RequestParam String account, @RequestParam String password) {
        Map<String, Object> map = new HashMap<String, Object>();
        String ac = loginService.selAccountIsExist(account);
        if (ac == null) {
            map.put("code", "1");
            return map;
        }
        String pa = loginService.selAccountPassword(account);
        if (!password.equals(pa)) {
            map.put("code", "1");
            return map;
        } else {
            map.put("code", "0");
            return map;
        }
    }


//前台ajax
$("#login").on("click", function() {
            var account  = $("#account").val();
            var password = $("#password").val();
            $.ajax({
                //指明客户端要向哪个页面里面的哪个方法发送请求
                url : "login.do",
                //contentType必须指定为：application/x-www-form-urlencoded
               contentType: 'application/x-www-form-urlencoded',
                type : "post",
                dataType : "json",
                cache : false,
                data : {"account":account,
                       "password":password},
                success: function(msg) {
                window.location.href("page/infomanage/main.jsp");
                   }
            });
        });

controller使用@RequestBody获取参数时  ajax contentType必须指定为：contentType为application/json   

//后台controller
 @RequestMapping(value = "/login", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, Object> login(@RequestBody Login login) {
        Map<String, Object> map = new HashMap<String, Object>();
        String ac = loginService.selAccountIsExist(login.getLogin());
            map.put("code", "0");
            return map;
    }

//前台ajax
	$("#login").on("click", function() {
			var login = new Object();
			login.account = $("#account").val();
			login.password = $("#password").val();
			$.ajax({
				//指明客户端要向哪个页面里面的哪个方法发送请求
				url : "login.do",
				// contentType为application/json
				contentType : "application/json",
				type : "post",
				dataType : "json",
				cache : false,
				data : JSON.stringify(login),
				success : function(msg) {
					window.location.href("page/infomanage/main.jsp");
				}
			});
		});