Ajax请求中data与Controller数据交互

第一种 直接放在url的参数里

Ajax：数据里放在URL里作为参数传递：

$(document).on("click","#btn1",function(){
    $.ajax({
        url: rootPath+"/ajax/s1?t1_nm="+$("#t1").val()+"&t2_nm="+$("#t2").val(),
        type: "POST", 
        success: function(result){
            alert(result);
        }
    });
});

Controller：接收。RequestParam(“t1_nm”)这里面的命名最好和URL里的参数一致。

@RequestMapping(value = "/s1", method = RequestMethod.POST) 
@ResponseBody
public String s1(@RequestParam("t1_nm") String t1, @RequestParam("t2_nm") String t2) {
    System.out.println("t1:"+t1+",t2:"+t2);
    return "success";
}

第二种 包装成json字串

Ajax：数据包装成一个JSON格式的数据传递。

$(document).on("click","#btn1",function(){
    var data ={
        "t1_nm": $("#t1").val(),
        "t2_nm": $("#t2").val()
    };
    console.log(data);
    $.ajax({
        url: rootPath+"/ajax/s2",
        type: "POST",
        contentType:'application/json',
        data:JSON.stringify(data),
        dataType: "json",
        success: function(result){
            alert(result);
        }
    });
});

Controller：接收。这个Map<String, Object> map就是接收到的json值。参数前面的@RequestBody注解就是用来接收json格式的。

@RequestMapping(value = "/s2", method = RequestMethod.POST)
@ResponseBody
public String s2(@RequestBody Map<String, Object> map) {
    System.out.println(map.toString());
    return "success";
}

第三种 包装form表单

Ajax：直接包装一个form表单内容为json格式传递。

$(document).on("click","#btn1",function(){
    let data = $("#form_text").serialize();
    console.log(data);
    $.ajax({
        url: rootPath+"/ajax/s3",
        type: "POST",
        data:data,
        success: function(result){
            alert(result);
        }
    });
});

，我们先构造一个存放表单数据的类，也就是实体类。这里其名字叫做AjaxModel。但是这个类的属性，必须和html里面的控件的name属性值一样，否则无法取到值。

public class AjaxModel {
	//对应<input id="t1" name="t1_nm" type="text"/> 注意name="t1_nm"
    private String t1_nm;   
    //对应<input id="t2" name="t1_nm" type="text"/> 注意name="t2_nm"
    private String t2_nm;
    public AjaxModel() {
    }
    public AjaxModel(String t1_nm, String t2_nm) {
        this.t1_nm = t1_nm;
        this.t2_nm = t2_nm;
    }
    public String getT1_nm() {
        return t1_nm;
    }
    public void setT1_nm(String t1_nm) {
        this.t1_nm = t1_nm;
    }
    public String getT2_nm() {
        return t2_nm;
    }
    public void setT2_nm(String t2_nm) {
        this.t2_nm = t2_nm;
    }
    @Override
    public String toString() {
        return "AjaxModel{" +
                "t1_nm='" + t1_nm + '\'' +
                ", t2_nm='" + t2_nm + '\'' +
                '}';
    }
}

Controller：接收。这样接收的数据直接就把ajaxModel给初始化过了，接到就可以用。

    @RequestMapping(value = "/s3", method = RequestMethod.POST)
    @ResponseBody
    public String s3(AjaxModel ajaxModel) {
        System.out.println(ajaxModel.toString());
        return "success";
    }

第四种 数据在data处拼接

Ajax：数据在data处拼接，然后发起请求到后台。

$(document).on("click","#btn1",function(){
    alert($("#t1").val());
    $.ajax({
        url: rootPath+"/ajax/s4",
        data:"t1_nm="+$('#t1').val()+"&t2_nm="+$('#t2').val(),
        type: "POST", 
        dataType: "json",
        success: function(result){
            alert(result);
        }
    });
});

Controller：接收。这里的参数可以直接换成AjaxModel ajaxModel，也可以直接构造model类。

@RequestMapping(value = "/s4", method = RequestMethod.POST) 
@ResponseBody
public String s4(@RequestParam("t1_nm") String t1, @RequestParam("t2_nm") String t2) {
    System.out.println("t1:"+t1+",t2:"+t2);
    return "success";
}

第五种 作为url的最末参数

Ajax：直接写在URL里，作为另一种形式的参数

$(document).on("click","#btn1",function(){
    $.ajax({
        url: rootPath+"/ajax/s5/"+$('#t1').val(),
        type: "POST", 
        dataType: "json",
        success: function(result){
            alert(result);
        }
    });
});

Controller：接收。这里的参数可以直接换成AjaxModel ajaxModel，也可以直接构造model类。

@RequestMapping(value = "/s5/{t1_nm}", method = RequestMethod.POST) 
@ResponseBody
public String s5(@PathVariable String t1_nm) {
    System.out.println("t1:"+t1_nm);
    return "success";
}

第六种 Json+一般参数混用

Ajax：Json和一般的参数混用

$(document).on("click","#btn1",function(){
    let data = $("#form_text").serialize();
    const ex_name="name";
    console.log(data);
    $.ajax({
        url: rootPath+"/ajax/s6",
        type: "POST",
        data:data+"&name="+ex_name,
        success: function(result){
            alert(result);
        }
    });
});

Controller：接收。Json格式直接用model类接收，额外的标注好名字接收。

    @RequestMapping(value = "/s6", method = RequestMethod.POST)
    @ResponseBody
    public String s6(AjaxModel ajaxModel,@RequestParam("name")String name) {
        System.out.println(ajaxModel.toString());
        System.out.println(name);
        return "success";
    }

标签：nm,t2,Ajax,t1,Controller,data,public,String
来源： https://blog.csdn.net/weixin_43603028/article/details/122424028