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

}
相关推荐
Enti7c1 小时前
利用jQuery 实现多选标签下拉框,提升表单交互体验
前端·交互·jquery
qq_427506081 天前
npm下载插件无法更新package.json和package-lock.json文件的解决办法
前端·npm·json
农民也会写代码2 天前
php将json数据保存在MySQL中并读取
mysql·json·php
Stay Passion2 天前
Java实用注解篇: @JSONField
java·开发语言·json
南郁3 天前
005-nlohmann/json 基础方法-C++开源库108杰
c++·开源·json
别催小唐敲代码3 天前
解决跨域的4种方法
java·服务器·前端·json
橙色小博3 天前
Python中的JSON库,详细介绍与代码示例
数据库·python·json
龙虎榜小红牛系统3 天前
Python项目源码57:数据格式转换工具1.0(csv+json+excel+sqlite3)
python·json·excel
wtsolutions3 天前
在Excel中轻松处理嵌套JSON数据:json-to-excel插件使用指南
json·excel·nested·嵌套·json-to-excel