ajax 访问 Controller 传参--POJO

ajax 定义 data 格式 如果帮到你了 就来一发赞吧

用 java 写后台接口的时候,自己也会用 jquery 的 ajax 做下测试,有一个地方总是因为没有总结老出错,就是 ajax 的 data 参数写法,因为有时候用 json 格式 ,有时候用 对象(就是{"key":"value"}格式),格式不对总是导致参数和值无法在后台 Controller 里面接收到,回过头再反复的配置 ajax 参数,很是麻烦, 这就把我自己总结的 ajax 参数写法拿出来希望能帮到和我一样问题的程序员朋友们.

我自己总结 ajax 的 data 参数的值写法主要就两种, json 格式和对象格式,都是 POJO 原理赋值给 Controller 的入参,两种格式都可以将键值传入后台 Controller 的入参里面,只是一些小配置不一样.

json 格式好处: 可以将大量的键值对一次性的赋值到后台Controller 的入参里面,一会我会截图展示,初次接触这东西的小伙伴不要怕不理解.

对象格式好处: 简单明了,少量的键值对推荐用这个方式,这也是ajax 最原始的 data 参数写法.

先说说最简单的模式,就是前端的 ajax 后端的 Controller 都不用额外配置,最基本的前后端传参模式

第一种 最普通

 ajax: data 的写法就是最简单的 ajax 的红框会赋值到后台代码的红框内.

注意: 这种传参方式传的不是 json ,就是普通的 key value  ,所以 ajax 不用定义 contentType:"application/json" 就不用定义了.

如果想多传几个参数,就在data 的 {"userName":"101040000","xxxxxx":"yyyyyy"} 里面用逗号隔开,最后一个值后面就别写逗号了,会使得 ajax 无效的.

文字代码:

<button οnclick="addUser()">
    addUser
</button>
<script type="text/javascript">
    function addUser() {//修改仪表盘信息
        $.ajax({
            type: "post",
            url: parent.contextPath + "user/addUser",
            async: false,
            cache: false,
//          contentType: "application/json",
            data: {"userName":"101040000"},
            success: function (data) {
                console.log(data);
            }
        });
  } 
</script>

后台代码:

文字代码:

@Controller
@RequestMapping("user")
public class UserController {
    @RequestMapping("/addUser")
    @ResponseBody
    public String addUser(User user) {  return user.getUserName();  }
}

第二种 升级版

这种就是传 json 格式  

1. ajax 要加上 contentType:"application/json",

2. ajax 的 data 属性的值 要用 单引号括起来,里面的参数的写法照常写就行

ajax 截图:

ajax 的文字代码就不写了 , 复制上面之前的代码就好!

后台截图: 注意后台入参前面要加上 @RequestBody ,不加的话,是接收不到前端传来的 json 数据的.

第三种: json 格式高级版

ajax 截图: 这个就是基于第一种最普通的写法,通过 JSON.stringify() 这个函数, 将 data 属性的数据转成 json , 后台一样能接收到 json 

JSON.stringify() 这个函数如果不起作用 你的 页面应该需要引入 jquery 插件才能起作用.

后台截图: 依然跟第二种一样

第四种 终极版

ajax 截图: 定义一个变量 dataValue 然后用 JSON.stringify() 函数将所要用到的键值对写进去 , data 后面就写定义的变量名 dataValue 就行, 这个名字自己可以随便定义 . aaa bbb 也行

后台截图: