Jquery ajax 提交序列化或JSON数据到后台

前端提交序列化数据

  • 前端代码
html 复制代码
$.ajax({
	url: "/user/add",
	type: "post",
	dataType: "json",
	data: {
	    user : $('#form').serialize()
	},
	success: function (result) {
	}
})
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1f9a7611c2c84249bc317b0b6813af07.png)
  • 后台代码
java 复制代码
@ResponseBody
@RequestMapping("/add")
public Msg form(User user){
	userDao.insert(user); // 添加一条信息
}

前端提交json格式数据

  • 前端代码
html 复制代码
//定义serializeObject方法,序列化表单
function serializeObject(form) {
    let obj = {};
    let a = form.serializeArray();
    $.each(a, function () {
        if (obj[this.name]) {
            if (!obj[this.name].push) {
                obj[this.name] = [obj[this.name]];
            }
            obj[this.name].push(this.value || '');
        } else {
            obj[this.name] = this.value || '';
        }
    });
    return obj;
}

$.ajaxSetup({
    contentType: 'application/json',
});


/**
 * 添加修改数据,提交表单
 * @param path
 * @param aim
 */
function doAddUpdate(path, aim) {
    //阻止表单自动提交
    $("#addUpdateForm").submit(function () {
        return false;
    });
    let obj =  serializeObject($("#addUpdateForm"));
    $.post(path, JSON.stringify(obj), function (data) {
        if (data.code == 200) {
            alert(data.msg);
            window.location.href = aim;
        } else {
            alert(data.msg);
        }
    });
}

<button onclick="doAddUpdate('user/doAddUpdate','user/list')">post数据</button>
  • 后台代码
java 复制代码
@PostMapping("/doAddUpdate")
public ResultBean doAddUpdate(@RequestBody User user) {

}
相关推荐
Ronin3055 小时前
【Linux网络】应用层自定义协议
linux·网络·应用层·序列化
码农葫芦侠18 小时前
Qt如何翻译JSON内容
qt·json
小丫头呀19 小时前
.NET8 通过自定义类映射appsettings.json 文件某个节点的配置
json·.net·.net8
饺子大魔王的男人1 天前
JSON可视化工具JSONCrack全解析:使用cpolar从本地到云端的协作升级
json
组合缺一1 天前
全球首个支持 IETF JSONPath (RFC 9535) 标准的 Java 框架,Snack4-Jsonpath v4.0.0 发布
java·开发语言·json·jsonpath
sakoba1 天前
MySQL的json处理相关方法
android·学习·mysql·json
卷卷的小趴菜学编程2 天前
Linux网络之----序列化和反序列化
网络·序列化·反序列化·守护进程·jsoncpp·进程组·前后台进程
njsgcs4 天前
json转excel python pd
python·json·excel·pd
代码搬运媛5 天前
【架构相关】tsconfig.json 与 tsconfig.node.json、tsconfig.app.json 的关系和作用
node.js·json
aerror6 天前
json转excel xlsx文件
开发语言·python·json