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

}
相关推荐
百锦再14 小时前
.Net配置文件appsetting.json的几种读取方法
chrome·json·.net·依赖注入·appsetting·web.config
葬歌倾城2 天前
JSON的缩进格式方式和紧凑格式方式
c#·json
火车叨位去19493 天前
Java中的JSON序列化和反序列化
json
测试杂货铺3 天前
Jmeter(六):json断言元件,jmeter参数化实现
jmeter·json
专注VB编程开发20年4 天前
C#,VB.NET从JSON数据里提取数组中的对象节点值
c#·json·.net
草履虫建模4 天前
Postman - API 调试与开发工具 - 标准使用流程
java·测试工具·spring·json·测试用例·postman·集成学习
旷世奇才李先生4 天前
jQuery EasyUI 安装使用教程
前端·jquery·easyui
奔跑的蜗牛AZ13 天前
TiDB 字符串行转列与 JSON 数据查询优化知识笔记
笔记·json·tidb
保持学习ing14 天前
SpringBoot电脑商城项目--创建订单+统计业务方法耗时
java·spring boot·spring·springmvc·jquery
保持学习ing15 天前
SpringBoot电脑商城项目--显示勾选+确认订单页收货地址
java·前端·spring boot·后端·交互·jquery