$(this).serialize() -- 如何添加一个值？答案

【问题标题】：$(this).serialize() -- How to add a value?$(this).serialize() -- 如何添加一个值？
【发布时间】：2011-09-26 05:44:28
【问题描述】：

目前我有以下：

$.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize(),
});

这很好用，但是我想为数据添加一个值，所以我尝试了

$.ajax({
    type: 'POST',
    url: this.action,
    data: $(this).serialize() + '&=NonFormValue' + NonFormValue,
});

但这并没有正确发布。关于如何将项目添加到序列化字符串的任何想法？这是一个不特定于表单的全局页面变量。

【问题讨论】：

你能澄清一下“没有正确发布”是什么意思吗？发生了什么？服务器收到了什么？
不应该是'&NonFormValue=' + NonFormValue吗？

标签： serialization jquery

【解决方案1】：

先添加item再序列化：

$.ajax({
    type: 'POST',
    url: this.action,
    data: $.extend($(this), {'NonFormValue': NonFormValue}).serialize()
});

【讨论】：

对我也不起作用。虽然它扩展了对象，但没有按预期工作。

【解决方案2】：

代替

 data: $(this).serialize() + '&=NonFormValue' + NonFormValue,

你可能想要

 data: $(this).serialize() + '&NonFormValue=' + NonFormValue,

如果NonFormValue 的值可能包含任何特殊字符，则应小心对其进行 URL 编码。

【讨论】：

使用encodeURIComponent确保NonFormValue没有任何特殊字符

【解决方案3】：

首先不应该

data: $(this).serialize() + '&=NonFormValue' + NonFormValue,

成为

data: $(this).serialize() + '&NonFormValue=' + NonFormValue,

其次你可以使用

url: this.action + '?NonFormValue=' + NonFormValue,

或者如果动作已经包含任何参数

url: this.action + '&NonFormValue=' + NonFormValue,

【讨论】：

您的第二个答案与问题所要求的效果不同； NonFormValue 将作为 URL 参数发送，而不是在 POSTed 数据中。如果 a) 在服务器端运行的任何东西都希望它被发布（例如在 Django 中使用 request.POST 而不是 request.REQUEST），或者 b) NonFormValue 不应该出现在 URL 中，这可能并不理想出于安全原因或因为它是临时值。

【解决方案4】：

虽然 matt b 的回答会起作用，但您也可以使用 .serializeArray() 从表单数据中获取数组，对其进行修改，然后使用 jQuery.param() 将其转换为 url 编码的表单。这样，jQuery 会为您处理额外数据的序列化。

var data = $(this).serializeArray(); // convert form to array
data.push({name: "NonFormValue", value: NonFormValue});
$.ajax({
    type: 'POST',
    url: this.action,
    data: $.param(data),
});

【讨论】：

这绝对是最好的选择 - 将序列化完全留给 jQuery，同时仍然能够为从表单中检索到的值添加新值。
这是最好的方法，不要玩弦乐
这应该是公认的答案。清洁和正确的方式

【解决方案5】：

别忘了你总是可以做到的：

<input type="hidden" name="NonFormName" value="NonFormValue" />

以您的实际形式，视情况而定，这可能更适合您的代码。

【讨论】：

【解决方案6】：

您可以编写一个额外的函数来处理表单数据，并且应该将您的非表单数据添加为表单中的数据值。参见示例：

<form method="POST" id="add-form">
    <div class="form-group required ">
        <label for="key">Enter key</label>
        <input type="text" name="key" id="key"  data-nonformdata="hai"/>
    </div>
    <div class="form-group required ">
        <label for="name">Ente Name</label>
        <input type="text" name="name" id="name"  data-nonformdata="hello"/>
    </div>
    <input type="submit" id="add-formdata-btn" value="submit">
</form>

然后添加这个jquery进行表单处理

<script>
$(document).onready(function(){
    $('#add-form').submit(function(event){
        event.preventDefault();
        var formData = $("form").serializeArray();
        formData = processFormData(formData);
        // write further code here---->
    });
});
processFormData(formData)
{
    var data = formData;
    data.forEach(function(object){
        $('#add-form input').each(function(){
            if(this.name == object.name){
                var nonformData = $(this).data("nonformdata");
                formData.push({name:this.name,value:nonformData});
            }
        });
    });
    return formData;
}

【讨论】：

【解决方案7】：

我们可以这样做：

data = $form.serialize() + "&foo=bar";

例如：

var userData = localStorage.getItem("userFormSerializeData");
var userId = localStorage.getItem("userId");

$.ajax({
    type: "POST",
    url: postUrl,
    data: $(form).serialize() + "&" + userData + "&userId=" + userId,
    dataType: 'json',
    success: function (response) {
        //do something
    }
});

【讨论】：

【解决方案8】：

这样更好：

data: [$(this).serialize(),$.param({NonFormValue: NonFormValue})].join('&')

【讨论】：

请添加更详细的说明，说明为什么这是一种更好的方法。
一行代码，你可以使用json对象获取更多参数。