JavaScript 封装表单数据为 JSON 并 AJAX 提交

作者:纸飞机

时间:2026-10-22

浏览:216

本文介绍如何使用 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
  }
});


希望以上内容能对大家有所帮助,感谢阅读及对本网站的支持!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章