本文介绍如何使用 JavaScript 和 jQuery 将 HTML 表单数据封装为标准 JSON 格式,并通过 AJAX 异步提交。核心代码通过 serializeArray 获取字段,处理同名参数数组,最终生成 JSON 对象供 AJAX 使用,适用于需要结构化数据提交的场景。
表单数据 JSON 封装与 AJAX 提交示例
本文主要讲解如何利用 JavaScript 将 HTML 表单(form)中的数据封装为 JSON 字符串,并通过 AJAX 技术进行提交。
以下是实现该功能的核心 JavaScript 代码。
function getFormJson(frm) { //frm:form表单的id
var o = {};
var a = $("#"+frm).serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
}
该函数返回的数据格式符合标准 JSON 规范。在 AJAX 请求中,可直接使用如下方式调用:
$.ajax({
type: 'post',
url: 'your url',
data: getFormJson(frm),
success: function(data) {
// your code
}
});
希望以上内容能对大家有所帮助,感谢阅读及对本网站的支持!