有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

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

代码编程 炮渣日记 2周前 (11-18) 17次浏览 已收录 0个评论 扫描二维码

一、键值对方式提交

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格式的数据。

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

小结:前端一定要学会利用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;
    }
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址