【已解决】页面form提交时候，怎么将对象已json格式提交？后端怎么接受？
- 工作小总结
- 时间：2024-02-18 10:16
- 1765人已阅读
简介
需求：在页面上，有个form表单，里面对象是通过for循环后，展示出来的。现在，在修改页面，页面修改数据后，怎么以json格式提交给后台？后台怎么获取？需求分析后难点：怎么获取到form表单中每个属性值和value呢？这些数据怎么以json格式提交呢？端接口怎么获取到这些数据呢？@RequestBody解决难道需要用到的技术：问题1：使用jQuery的序列化及根据name获取value的。jQue
🔔🔔🔔好消息!好消息!🔔🔔🔔
有需要的朋友👉:联系凯哥
需求：
在页面上，有个form表单，里面对象是通过for循环后，展示出来的。现在，在修改页面，页面修改数据后，怎么以json格式提交给后台？后台怎么获取？
需求分析后难点：
怎么获取到form表单中每个属性值和value呢？
这些数据怎么以json格式提交呢？
端接口怎么获取到这些数据呢？
@RequestBody
解决难道需要用到的技术：
问题1：
使用jQuery的序列化及根据name获取value的。
jQuery序列化：
var formData = $(this).serializeArray();
根据name获取value:
$.each(formData, function(i, field) {
if (field.name === 'keyword') {
currentPluginVo[field.name] = field.value;
groupedFormData.push(currentPluginVo);
currentPluginVo = {};
} else {
currentPluginVo[field.name] = field.value;
}
});问题2：
将数据转换成json格式：
JSON.stringify(jsonDataArray)
问题3：
后台接口接收json对象:
@RequestBody
具体代码案例：
HTML页面中JS代码：
<script>
// 定义一个模拟BTWPluginVo对象的构造函数
function BTWPluginVo(data) {
this.siteName = data.siteName;
this.siteCode = data.siteCode;
this.description = data.description;
this.id = data.id;
}
$('form#tab-7-form').on('submit', function(event) {
event.preventDefault(); // 阻止默认的表单提交行为
var formData = $(this).serializeArray();
var groupedFormData = []; // 用于存储分组后的表单数据
var currentPluginVo = {};
$.each(formData, function(i, field) {
if (field.name === 'keyword') {
currentPluginVo[field.name] = field.value;
groupedFormData.push(currentPluginVo);
currentPluginVo = {};
} else {
currentPluginVo[field.name] = field.value;
}
});
// 处理最后一组数据
if (!$.isEmptyObject(currentPluginVo)) {
groupedFormData.push(currentPluginVo);
}
var jsonDataArray = groupedFormData.map(function(obj) {
return new BTWPluginVo(obj);
});
$.ajax({
url: "后台提交json接口地址",
type: 'POST',
contentType: 'application/json; charset=utf-8', // 设置请求内容类型为JSON
dataType: 'json',
data: JSON.stringify(jsonDataArray),
//data: encodeURI((JSON.stringify(jsonDataArray)),"UTF-8"),
beforeSend: function(xhr) {
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
},
beforeSubmit : function (){
$("#submitQrcodeUpdate").attr("disabled","disabled");
index = jeesnsDialog.loading();
},
success: function(response) {
// 处理成功的回调
$("#submitQrcodeUpdate").removeAttr("disabled");
jeesnsDialog.successTips(response.message);
},
error: function(xhr, status, error) {
// 处理错误的回调
$("#submitQrcodeUpdate").removeAttr("disabled");
jeesnsDialog.errorTips(response.message);
}
});
});
</script>后端接口写法：
@RequestMapping(value = "qrcodeUpdate",method = RequestMethod.POST)
@ResponseBody
public Object qrcodeUpdate(@RequestBody List<BTWPluginVo> btwPluginVos, HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
//TODO批量更新操作
return new ResponseModel(0,"操作成功");
}