ajax与后端交互,Ajax请求中data与后端的交互有哪几种方法

前言

Ajax提交数据非常的方便,可以把整个表单化为一个json体往后台传递。但是很多时候,我们并不希望用整个表单的数据,或者不希望使用整个表单。

有表单的前端页面

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

1234567

然后要有一个controller类控制。@Controller@RequestMapping("/ajax")public class AjaxController { /***/ }123

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

}

});});123456789

Controller:接收。RequestParam("t1_nm")这里面的命名最好和URL里的参数一致。@RequestMapping(value = "/s1", method = RequestMethod.POST) @ResponseBodypublic String s1(@RequestParam("t1_nm") String t1, @RequestParam("t2_nm") String t2) {

System.out.println("t1:"+t1+",t2:"+t2);

return "success";}123456

第二种

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

}

});});1234567891011121314151617

Controller:接收。这个Map map就是接收到的json值。@RequestBody注解就是用来接收json格式的。@RequestMapping(value = "/s2", method = RequestMethod.POST)@ResponseBodypublic String s2(@RequestBody Map map) {

System.out.println(map.toString());

return "success";}123456

第三种

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

}

});});123456789101112

这里我们要玩点高级玩意儿了,我们先构造一个存放表单数据的类,也就是实体类。这里其名字叫做AjaxModel。但是这个类的属性,必须和jsp里面的控件的name属性值一样,否则无法取到值。public class AjaxModel {

//对应 注意name="t1_nm"

private String t1_nm;

//对应 注意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 + '\'' +

'}';

}}12345678910111213141516171819202122232425262728293031

Controller:接收。这样接收的数据直接就把ajaxModel给初始化过了,接到就可以用。@RequestMapping(value = "/s3", method = RequestMethod.POST)

@ResponseBody

public String s3(AjaxModel ajaxModel) {

System.out.println(ajaxModel.toString());

return "success";

}123456

第四种

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

}

});});123456789101112

Controller:接收。这里的参数可以直接换成AjaxModel ajaxModel,也可以直接构造model类。@RequestMapping(value = "/s4", method = RequestMethod.POST) @ResponseBodypublic String s4(@RequestParam("t1_nm") String t1, @RequestParam("t2_nm") String t2) {

System.out.println("t1:"+t1+",t2:"+t2);

return "success";}123456

第五种

Ajax:直接写在URL里,作为另一种形式的参数$(document).on("click","#btn1",function(){

$.ajax({

url: rootPath+"/ajax/s5/"+$('#t1').val(),

type: "POST",

dataType: "json",

success: function(result){

alert(result);

}

});});12345678910

Controller:接收。这里的参数可以直接换成AjaxModel ajaxModel,也可以直接构造model类。@RequestMapping(value = "/s5/{t1_nm}", method = RequestMethod.POST) @ResponseBodypublic String s5(@PathVariable String t1_nm) {

System.out.println("t1:"+t1_nm);

return "success";}

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值