AJAX常见提交数据的三种方式（Demo详解）

很开心你能来阅读，本章小结了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")
    @ResponseBody
    public 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")
    @ResponseBody
    public 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")
    @ResponseBody
    public 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篇博客