Jquery表单序列化后添加数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery表单序列化后添加数据相关的知识,希望对你有一定的参考价值。

参考技术A serialize()、serializeArray()方法都是jquery用户序列化表单的,用于ajax提交的data值的序列化

在chrome的控制台我们很清楚的看到了serializeArray()返回的是json数组,数组的每个对象都是有json字符串构成,我们可以看到,每个json字符串包括两个键值对,每个键值对都是有name,value组成,其实serializeArray()它把表单里的每个需要提交的dom的name的值赋给json字符串的name,dom的value的值赋给json字符串的value.

那么我们只需这要添加额外的内容:

var dataParam = $("#updateChannelForm").serializeArray();

例如我想添加sex="男"

dataParam.push("name":"sex","value":"男") 就可以了

我们看到serialize()方法把表单里的内容序列化成了字符串

"id=58&channelType=2&subTitle=591teststetets&extAttrValueId=599"

那么我们只需这要添加额外的内容:

var dataParam = $("#updateChannelForm").serialize();

例如我想添加sex="男"

dataParam =dataParam +"&"+"sex=男"

如何在没有 jQuery 的情况下序列化表单? [复制]

【中文标题】如何在没有 jQuery 的情况下序列化表单? [复制]【英文标题】:how to serialize a form without jQuery? [duplicate] 【发布时间】:2012-05-07 06:00:55 【问题描述】:

由于很多原因(首先:学习 javascript),我需要在没有 jQuery 的情况下序列化一个表单,并将生成的序列化数据结构发送到一个带有 ajax 的 php 页面。 序列化后的数据必须是 JSON 格式。

我该怎么做?

--编辑--

这就是我的表单的样子:http://jsfiddle.net/XGD4X/

【问题讨论】:

您可以发布您正在使用的标记吗?请设置一个示例小提琴 如果您不反对使用 json2.js,您可以使用它,或者获取它并研究它是如何序列化的,并从该源中学习。 你根本不愿意使用任何库吗? 更好的学习方法是查看jquery源代码。 james.padolsey.com/jquery/#v=git&fn=serialize @F.Calderan 这是我的代码:jsfiddle.net/XGD4X 【参考方案1】:

CoffeeScript 实现返回一个 GET 查询字符串:

serialize = (form) ->
  enabled = [].filter.call form.elements, (node) -> not node.disabled
  pairs = [].map.call enabled, (node) ->
    encoded = [node.name, node.value].map(encodeURIComponent)
    encoded.join '='
  pairs.join '&'

或者,如果您更喜欢键值映射:

serialize = (form) ->
  data = 
  for node in form.elements when not node.disabled and node.name
    data[node.name] = node.value
  data

我没有看过 jQuery 的实现,所以不能保证 100% 的兼容性。

【讨论】:

【参考方案2】:

我正在研究一个类似的问题,我同意在不使用框架的情况下首先学习如何编程是值得的。我正在使用数据对象(BP.reading)来保存信息,在我的例子中是血压读数。然后 JSON.stringify(dataObj) 为您完成工作。

这里是“保存”按钮单击的处理程序,它是 dataObj 上的一个方法。注意我使用表单而不是表格来输入数据,但同样的想法应该适用。

update: function () 
            var arr = document.getElementById("BP_input_form").firstChild.elements,
                request = JDK.makeAjaxPost();  // simple cross-browser httpxmlrequest with post headings preset

            // gather the data and store in this data obj
            this.name = arr[0].value.trim();
            ...
            this.systolic = arr[3].value;
            this.diastolic = arr[4].value;

            // still testing so just put server message on page
            request.callback = function (text) 
                msgDiv.innerHTML += 'server said ' + text;
            ;
            // 
            request.call("BP_update_server.php", JSON.stringify(this));
        

希望对你有帮助

* 编辑以显示通用版本 *

在我的程序中,我使用对象来发送、接收、显示和输入相同类型的数据,因此我已经准备好对象。要获得更快的解决方案,您可以只使用一个空对象并将数据添加到其中。如果数据是一组相同类型的数据,则只需使用数组。但是,对于一个对象,您在服务器端有有用的名称。这是一个更通用的版本,未经测试,但通过了 jslint。

function postUsingJSON() 
    // collect elements that hold data on the page, here I have an array
    var elms = document.getElementById('parent_id').elements,
        // create a post request object
        // JDK is a namespace I use for helper function I intend to use in other
        //  programs or that i use over and over
        // makeAjaxPost returns a request object with post header prefilled
        req = JDK.makeAjaxPost(),
        // create object to hold the data, or use one you have already
        dataObj = ,   // empty object or use array dataArray = []
        n = elms.length - 1;     // last field in form

    // next add the data to the object, trim whitespace
    // use meaningful names here to make it easy on the server side
    dataObj.dataFromField0 = elms[0].value.trim();  // dataArray[0] =
    //        ....
    dataObj.dataFromFieldn = elms[n].value;

    // define a callback method on post to use the server response
    req.callback = function (text) 
        // ...
    ;

    // JDK.makeAjaxPost.call(ULR, data)
    req.call('handle_post_on_server.php', JSON.stringify(dataObj));

祝你好运。

【讨论】:

所以,基本上,我需要做的是构建一些 dataObj 数组来存储我的值(如 dataObj[0].prod_name 和 dataObj[0].prod_num)并将整个数组转换为 JSON使用 JSON.stringify 的字符串。我说得对吗?还是我错过了什么? 据我了解,JSON 主要是对象文字 javascript 语法,而 stringify 方法只是剥离了对象方法(为了安全起见),只留下数据。对于一个简单的程序,您可以只声明一个空对象,将数据添加到其中,字符串化并发布。如果这对您的数据有意义,或者只是一个对象,请使用数组。早餐后,我将调整我的帖子以显示更通用的解决方案。您是否也有兴趣查看我的 makeAjaxPost() 函数? 感谢您的宝贵时间:D。关于你的 makeAjaxPost 函数……嗯……我一直很感兴趣。现在我根据你的建议做一些测试。 时间花得很好,因为它阐明了我对这个主题的想法。最好看看你自己离这里有多远。清理完文档后,我将在明天添加部分 JDK 模块。 我又查看了你的代码,我有一些问题。将表中的每一行视为一个数据对象,例如 name: 'widget', numA: '15', numB: '87',您会将此对象称为产品,还是有更好的名称?数字字段之间有什么区别?接下来考虑这些对象的列表,例如 list: anArrayofProducts[...],你会如何命名这个列表?您是否考虑过为每个对象使用单独的标记、创建添加到“列表”的“产品”的表单以及显示“列表”的表格?

以上是关于Jquery表单序列化后添加数据的主要内容,如果未能解决你的问题,请参考以下文章

jquery给表格动态添加删除行后如何获取数据

js表单序列化

使用 ajax 和 jquery 从数据库中动态添加预先填充的表单

jQuery 序列化数据和 PHP $_POST 不匹配

jquery怎样把表单中的值转换成json对象

将表单名称发送到 JS/jQuery 和序列化