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篇博客