Ajax请求中data与后端的交互

前言

本篇介绍Ajax在前端获取数据，然后传递数据给后端交互的几种例子。本篇的介绍是Idea+Springboot+JSP web的组合。Ajax提交数据非常的方便，可以把整个表单化为一个json体往后台传递。但是很多时候，我们并不希望用整个表单的数据，或者不希望使用整个表单，因此这篇博客将会讲述，多种情况下的提交方式。笔者一般习惯使用on()方法启动控件，因为这样比较灵活，所以例子自然也是用这种方法写的。当然千人千面，大家参考怎么使用Ajax就行了，click方法怎么弄，不是博客主要内容。

有表单的前端页面

第一类例子是有表单的提交方式，假设名字叫做page1.jsp。

<script src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="./../js/my.ajax.sample.js"></script>
<form id="my_form" >
        <input id="t1" name="t1_nm" type="text"/>
        <input id="t2" name="t1_nm" type="text"/>
        <input id="btn1" type="button" name="submit" value="submit"> 
</form>

然后要有一个controller类控制。

@Controller
@RequestMapping("/ajax")
public class AjaxController {
    
     /***/ }

Ajax请求

以下的ajax方法是写在my.ajax.sample.js文件中的内容，当然要使用ajax方法，必须要jQuery引入。如果发现外部js文件不可用，参考【SpringBoot开发小记】里面写的如何引用外部js文件。为了写起来方便，笔者这里全部用POST写了，其实GET，POST，DELETE等等这些方法是根据需求来的，大家自己按需求选择就好了。

第一种

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

第二种

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

第三种

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。但是这个类的属性，必须和jsp里面的控件的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";
    }

第四种

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

第五种

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