Javascript - 获取Json结构的表单数据

功能很简单,这里使用了jQuery的方法,因此依赖于jQuery。

如果存在多项name相同的表单对象,会使用","英文逗号隔开。

完整代码:

<pre name="code" class="javascript">//从from获取数据,转为对象
function fromToJson(form) {
    var result = {};
    var fieldArray = $('#' + form).serializeArray();
    for (var i = 0; i < fieldArray.length; i++) {
        var field = fieldArray[i];
        if (field.name in result) {
            result[field.name] += ',' + field.value;
        } else {
            result[field.name] = field.value;
        }
    }
    return result;
}  

通过代码也可以看出入参是form表单的id属性值。其他情况可以自行修改。

下面是效果图:  

上面是表单内容,下面是调用js方法后的结果:

时间: 2024-11-10 01:26:46

Javascript - 获取Json结构的表单数据的相关文章

深入分析JSON编码格式提交表单数据_json

以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的JSON格式提交表单数据方法,将表单里的所有数据转化的具有一定规范的JSON格式,然后传输的服务器端.服务器端接收到的数据是直接可以使用的合格JSON代码. 如何声明以JSON格式提交表单 大家应该对如何用表单上传一个文件的写法很熟悉,它需要在HTML中form标记上添加 enctype="mult

深入分析JSON编码格式提交表单数据

  这篇文章主要介绍了深入分析JSON编码格式提交表单数据的相关资料,需要的朋友可以参考下 以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的JSON格式提交表单数据方法,将表单里的所有数据转化的具有一定规范的JSON格式,然后传输的服务器端.服务器端接收到的数据是直接可以使用的合格JSON代码. 如何声明以JSON格式提交表单 大家应该对如何用表

JavaScript获取按钮所在form表单id的方法

 本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. 1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button

javascript获取form里的表单元素的示例代码

 本篇文章主要是对javascript获取form里的表单元素的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 //获取form对象   var form=document.getElementById('my_form');   //用户名input对象 user_name是对象的name属性   var userName=form.user_name;   //用户名清空   userName.value='';   //用户密码input对象 password是对象的na

JavaScript获取按钮所在form表单id的方法_javascript技巧

本文实例讲述了JavaScript获取按钮所在form表单id的方法.分享给大家供大家参考.具体如下: 这里使用javascript获取form表单按钮的id,可以通过下面的JS代码获取. <!DOCTYPE html> <html> <body> <h1>www.sharejs.com</h1> <form id="form1"> <button id="button1" type=&q

javascript获取form里的表单元素的示例代码_javascript技巧

//获取form对象 var form=document.getElementById('my_form'); //用户名input对象 user_name是对象的name属性 var userName=form.user_name; //用户名清空 userName.value=''; //用户密码input对象 password是对象的name属性 var password=form.password; //用户密码清空 password.value=";

举例详解HTML5中使用JSON格式提交表单

以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的JSON格式提交表单数据方法,将表单里的所有数据转化的具有一定规范的JSON格式,然后传输的服务器端.服务器端接收到的数据是直接可以使用的合格JSON代码.如何声明以JSON格式提交表单 大家应该对如何用表单上传一个文件的写法很熟悉,它需要在HTML中form标记上添加 enctype="multi

一个检测表单数据的JavaScript实例_javascript技巧

一个检测表单数据的JavaScript实例,很简单,很实用,感兴趣的朋友可以看看 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-检测表单数据</title> <style> [role

一个检测表单数据的JavaScript实例

 一个检测表单数据的JavaScript实例,很简单,很实用,感兴趣的朋友可以看看 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 7