`

js将form表单序列化[json字符串、数组、对象]

 
阅读更多

js将form表单序列化[json字符串、数组、对象]

(转至:http://www.cnblogs.com/bjlhx/p/6659392.html)

 

1.序列化为字符串

$("#Form").serialize();//name=zhangsan&sex=1&age=20  

2.序列化为数组

  var formData=$("#form").serializeArray();//[Object, Object, Object] 

自定义参数补充

  formData.push({"name": "psid", "value": $("#psid").val()});

3.序列化为对象

function getFormJson(form) {
        var o = {};
        var a = $(form).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;
    }

 

4.ajax传递普通数组

var deleteNum= [];//定义要传递的数组
deleteNum.push("1");
deleteNum.push("2");
deleteNum.push("3");//向数组中添加元素

$.ajax({
    type:"post",
    url:"deleteNum.do",
    data:{deleteNum:deleteNum},
    traditional: true,//必须指定为true
    success:function(data){
        if(data.success){
            deleteNum = [];
        }
    }
});

 后端代码

public AjaxResult deleteNum(String[] deleteNum){
    AjaxResult ajaxResult = new AjaxResult();
    //这个时候已经得到了deleteNum数组值
    return ajaxResult;
}

 

5.form表单提交自定义对象数组

<form id="form" name="form"  method="post">
 <input type="hidden" name="table" value="user">
  <table>
    <tr>
      <td><input type="text" name="userList[0].name"/></td>
      <td><input type="text" name="userList[0].password"/></td>
    </tr>
    <tr>
      <td><input type="text" name="userList[1].name"/></td>
      <td><input type="text" name="userList[1].password"/></td>
    </tr>
    <tr>
      <td><input type="text" name="userList[2].name"/></td>
      <td><input type="text" name="userLIst[2].password"/></td>
    </tr>
  </table>
</form>

 ajax提交

$("#form").serializeArray()

后端接收

public class FormList {
        private String table;
        private ArrayList<User> userlist;
        
        public String getTable() {
            return table;
        }
        public void setTable(String table) {
            this.table = table;
        }
        public ArrayList<User> getUserlist() {
            return userlist;
        }
        public void setUserlist(ArrayList<User> userlist) {
            this.userlist= userlist;
        }
    }

 

public AjaxResult saveUpdateUser(FormList form){
    List<User> userlist = list.getUserlist(); 
}

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    jQuery序列化form表单数据为JSON对象的实现方法

    但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串。 serialize确实是能够解决一般的提交数据。但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时...

    JQuery扩展包-多种序列化方式

    Jquery自带的序列化,仅对form表单进行序列化,有很大的局限性,现在对齐进行扩展可以进行任意的序列化,包括json格式,字符串格式、数组格式,数组时自动转化为字符串等。并可以根据开发需要,随时扩展自己想要的...

    jquery序列化form表单使用ajax提交后处理返回的json数据

    1、返回json字符串: 代码如下: /** 将一个字符串输出到浏览器 */  protected void writeJson(String json) {  PrintWriter pw = null;  try {  servletResponse.setContentType(“text/plain;charset=UTF-8”)...

    jQuery序列化后的表单值转换成Json

    通过$(#form).serialize()可以获取到序列化的表单值字符串。 例如: a=1&b=2&c=3&d=4&e=5 通过$(#form).serializeArray()输出以数组形式序列化表单值。 [ {name: 'firstname', value: 'Hello'}, {name: '...

    将JavaScript的jQuery库中表单转化为JSON对象的方法

    大家知道Jquery中有serialize方法,可以将表单序列化为一个“&”连接的字符串,但却没有提供序列化为Json的方法。不过,我们可以写一个插件实现。   我在网上看到有人用替换的方法,先用serialize序列化后,将&替换...

    unserialize:jQuery 反序列化插件

    返回一个 JSON 对象,其值在字符串中说明。 如何使用: 这个插件有两个用例。 第一个用例: 起初,它与“serialize()”完全相反。 假设我们有一个 ID 为“testform”的表单,它有两个文本输入,名为“testvar1...

    form2js:自动从code.google.compform2js导出

    示例中用于JSON序列化的库是 这个库所做的只是收集表单数据并将其放入javascript对象中(显然,您可以通过序列化来获取JSON / XML / etc字符串,但这并不是唯一的目的)。用法 form2object(rootNode, delimiter, ...

    jQuery向后台传入json格式数据的方法

    而且用jquery对表单序列化的时候,返回的格式是一个数组,还需要作进一步转换。其实只要我们在ajax方法中配置一些东西就可以完成。代码如下: &lt;form id="ff"&gt; &lt;input type="text" name="test1"/&gt; &lt...

    JQuery权威指南源代码

    使用$.isPlainObject()函数检测对象是否为原始对象 使用$.contains()函数检测两个节点是否包含 使用$.param()进行数组元素序列化 使用函数$.extend()扩展工具函数 使用函数$.proxy()改变事件函数的作用域 使用...

    jquery-1.1.3 效率提高800%

    "json": 将响应作为JSON求值,并返回一个Javascript对象。 "jsonp": 使用JSONP载入一个JSON代码块. 会在URL的末尾添加"?callback=?"来指明回调函数。(jQuery 1.2以上的版本支持) "text": 文本格式的...

    python入门到高级全栈工程师培训 第3期 附课件代码

    07 JS的字符串对象 08 JS的数组对象 09 JS的函数对象 第42章 01 JS的函数作用域 02 JS的window对象之定时器 03 JS的history对象和location对象 04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之...

    jQuery权威指南366页完整版pdf和源码打包

    9.2.1 浏览器的检测 9.2.2 数组和对象的操作 9.2.3 字符串操作 9.2.4 测试操作 9.2.5 url操作 9.3 工具函数的扩展 9.4 其他工具函数—$.proxy() 9.5 综合案例分析—使用jquery扩展工具函数实现对...

    jQuery权威指南-源代码

    6.2.3 serialize()序列化表单/175 6.3 $.ajax()方法/177 6.3.1 $.ajax()的基本概念/177 6.3.2 $.ajaxSetup()设置全局Ajax /181 6.4 Ajax中的全局事件/184 6.4.1 Ajax全局事件的基本概念/184 6.4.2 ajaxStart...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    Json与pickle数据序列化 软件目录结构规范 本周作业 第5周 心灵分享 ATM存钱取钱案例剖析 模块定义、导入、优化详解 内置模块详解之time与datetime模块 内置模块详解之Range模块 内置模块详解之OS模块 内置模块...

    jQuery详细教程

    &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); &lt;p&gt;If you click on me, I ...

    xPanel-crx插件

    最后也是重要的一点,即序列化的对象。 例如:{“ car”:“ camry”} 如果您要发起没有任何Cookie的请求,则可以关闭“ Cookies”开关 为了这个结果 它会以字符串形式显示在右侧。 而且,如果您打开控制台,您还...

    Java学习笔记-个人整理的

    {7.12}对象序列化}{117}{section.7.12} {8}多线程}{121}{chapter.8} {8.1}线程的常用属性与方法}{121}{section.8.1} {8.2}后台线程}{123}{section.8.2} {8.3}创建线程的两种方法}{123}{section.8.3} {8.4}...

Global site tag (gtag.js) - Google Analytics