龙空技术网

AJAX常见提交数据的三种方式

Python程序员涵涵 405

前言:

眼前同学们对“ajaxpostform上传图片”大概比较关切,看官们都需要知道一些“ajaxpostform上传图片”的相关资讯。那么小编也在网络上搜集了一些对于“ajaxpostform上传图片””的相关知识,希望兄弟们能喜欢,大家快快来学习一下吧!

一、键值对方式提交

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;    }

标签: #ajaxpostform上传图片