福州最好的网站建设网络公司/百度app官网

很开心你能来阅读，本章小结了ajax常见的传值方式，共同成长，一起进步。

1.关于ajax基础文章请参考：Ajax基础知识应用案例（Demo）

2.关于json相关知识请参考：json字符串的讲解

一、键值对方式提交

AJAX提交

<script type="text/javascript">function submitData() {//1.获取需要提交的数据var num = $("#num").val();var name = $("#name").val();var sex = $("#sex").val();var age = $("#age").val();//2.通过ajax提交数据到“stu/add”$.post("stu/add",{stuNum:num,stuName:name,stuSex:sex,stuAge:age},function(data){console.log(data);},"json");}</script>

控制器接收

方式1：属性接收

    @RequestMapping("stu/add")@ResponseBodypublic HashMap<String,Object> add(String stuNum,String stuName,String stuSex,int stuAge){System.out.println(stuNum);System.out.println(stuName);System.out.println(stuSex);System.out.println(stuAge);HashMap<String,Object> map = new HashMap<>();map.put("code",1);return map;}

方式2：对象接收

    @RequestMapping("stu/add")@ResponseBodypublic HashMap<String,Object> add(Student stu){System.out.println(stu);HashMap<String,Object> map = new HashMap<>();map.put("code",1);return map;}

小结：当你提交的是键值对的格式的时候，你可以用属性接受，也可以用对象直接接受。

二、提交JSON格式的字符串

AJAX提交 如果ajax提交的是满足json格式的字符串，则需要设置：contentType:"application/json"

 function submitData() {//1.获取需要提交的数据var num = $("#num").val();var name = $("#name").val();var sex = $("#sex").val();var age = $("#age").val();var obj = {};   // var obj = [];obj['stuNum'] = num;obj['stuName'] = name;obj['stuSex'] = sex;obj['stuAge'] = age;//转换成json格式var jsonStr = JSON.stringify(obj);$.ajax({url:"stu/add",type: "POST",//data:jsonStr,表示提交到控制器的是字符串（字符串满足json格式） -->contentType:"application/json"data:jsonStr,contentType:"application/json",success:function(data){console.log(data);}});}

控制器接收数据如果前端提交数据

contentType的值只要为"application/x-www-form-urlencoded"一律使用@RequestBody注解处理数据

@RequestMapping("stu/add")
@ResponseBody 
public HashMap<String,Object> add(@RequestBody Student stu){ System.out.println(stu);HashMap<String,Object> map = new HashMap<>(); map.put("code",1); return map; 
}

①@RequestBody是作用在形参列表上，用于将前台发送过来固定格式的数据【xml格式 或者 json等】封装为对应的 JavaBean 对象。
②@ResponseBody的作用其实是将java对象转为json格式的数据。

小结：前端一定要学会利用JSON.stringify(obj)转换成字符串，后台响应的数据转换成json格式用@ResponseBody 即可。

三、提交对象

AJAX提交

如果提交的数据是对象，设置 contentType=“application/x-www-form-urlencoded”,或者不设置contentType

（默认值即为application/x-www-form-urlencoded）

    function submitData() {var num = $("#num").val();var name = $("#name").val();var sex = $("#sex").val();var age = $("#age").val();var obj = {};   // var obj = [];obj['stuNum'] = num;obj['stuName'] = name;obj['stuSex'] = sex;obj['stuAge'] = age;$.ajax({url:"stu/add",type: "POST",//data:obj,表示提交到控制器的是JSON对象   -->ontentType:"application/x-www-form-urlencoded"data:obj,contentType:"application/x-www-form-urlencoded",success:function(data){console.log(data);}});}

后台实现代码

    @RequestMapping("stu/add")@ResponseBodypublic HashMap<String,Object> add(Student stu){System.out.println(stu);HashMap<String,Object> map = new HashMap<>();map.put("code",1);return map;}

I hope this article can help you grow and progress together.

2020.05.04 记录辰兮的第61篇博客