当前位置: 首页 > web >正文

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

前端提交序列化数据

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

前端提交json格式数据

  • 前端代码
//定义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>

在这里插入图片描述

  • 后台代码
@PostMapping("/doAddUpdate")
public ResultBean doAddUpdate(@RequestBody User user) {}
http://www.xdnf.cn/news/4715.html

相关文章:

  • 前端缓存踩坑指南:如何优雅地解决浏览器缓存问题?
  • CKESC STONE 80A-MC 电调的全场景可靠性技术测评
  • 从零打造个人博客静态页面与TodoList应用:前端开发实战指南
  • Maven
  • AI CUBE 使用指南 目标检测格式范例 AI cube 报错数据集不合规范,请清洗数据集
  • 在Hugging Face网站像Github一样克隆repository到本地的具体步骤
  • 【数据结构】——链表OJ(下)
  • 丝路传说手游:职业选择与高难度BOSS突破指南
  • 视频编解码学习8之视频历史
  • hprof文件,java虚拟机堆转储文件,Dump文件
  • 使用adb设置wifi相关
  • AI Agent开发之门:微软官方课程全面解析
  • R1-Searcher:用强化学习解锁大语言模型检索新能力!
  • 计算机体系架构-----设计模式:状态模式(从程序员加班问题切入)
  • SpringBoot中使用MCP和通义千问来处理和分析数据-连接本地数据库并生成实体类
  • 只出现一次的数字(暴力、哈希查重、异或运算)
  • Python基于Django和MySQL实现突发公共卫生事件舆情分析系统(有大屏功能)
  • 【AI论文】FlexiAct:在异构场景中实现灵活的动作控制
  • 线程池的核心参数和线程创建方式,线程和进程
  • rust程序静态编译的两种方法总结
  • 手势、鼠标滑动实现界面切换
  • 介绍Unity中的Dictionary
  • npm包之serve-favicon
  • flow-matching 之学习matcha-tts cosyvoice
  • 集团云解决方案:集团企业IT基础架构的降本增效利器
  • RAG技术在测试用例生成中的应用
  • FAST角点检测算法原理附C++代码实现
  • HarmonyOS NEXT之深度解析ArkUI自定义组件:从基础实现到生产级登录组件的进化之路
  • 复盘20250508
  • CSS:元素显示模式与背景