如何在jQuery中修改序列化表格数据?


81

我正在尝试使用AJAX提交表单,因此必须对数据进行serialize()。但是我正在使用,fckEditor而jQuery不知道如何处理它,因此在序列化之后,我尝试手动修改值,但是到目前为止没有运气...任何想法

if(content_val!=""){
    var values = $("#frmblog").serialize();
    values.content = content_val; //content_val is the manually fetched data which I am trying to insert into the serialized content.
    alert(content_val); alert(values);
}

为什么不在序列化之前插入它?
亚当·阿罗德

问题是,在序列化过程中,在“ content”键中设置了一些默认值,所以我不能只是附加一个新值,而是必须更新其中的一个值
Bluemagica 2011年

啊,那改变了一切;看到我更新的答案。
TJ Crowder

Answers:


152

serialize返回包含表单字段的URL编码的字符串。如果需要附加到它,则可以使用标准的URL编码的字符串规则进行附加,例如:

var values = $("#frmblog").serialize();
values += "&content=" + encodeURIComponent(content_val);

(以上假设调用values后总会有一个值serialize;如果不一定正确,则在添加之前&根据是否values为空确定是否使用。)

或者,如果愿意,可以使用serializeArray,然后将其添加到数组中,并使用jQuery.param将结果转换为查询字符串,但这似乎很漫长:

// You can also do this, but it seems a long way 'round
var values = $("#frmblog").serializeArray();
values.push({
    name: "content",
    value: content_val
});
values = jQuery.param(values);

更新:在稍后添加的评论中,您说:

问题是,在序列化过程中,在“ content”键中设置了一些默认值,因此我不能只是附加一个新值,而必须更新其中的一个新值。”

那改变了事情。content在URL编码的字符串中查找是很痛苦的,所以我会使用数组:

var values, index;

// Get the parameters as an array
values = $("#frmblog").serializeArray();

// Find and replace `content` if there
for (index = 0; index < values.length; ++index) {
    if (values[index].name == "content") {
        values[index].value = content_val;
        break;
    }
}

// Add it if it wasn't there
if (index >= values.length) {
    values.push({
        name: "content",
        value: content_val
    });
}

// Convert to URL-encoded string
values = jQuery.param(values);

您可能希望使它成为可重用的功能。


4

这是一个基于@TJ答案的完整jquery插件。你可以打电话

$('form#myForm').awesomeFormSerializer({
    foo: 'bar',
})

它将用值'bar'替换或添加参数'foo'(或您在对象中添加的任何其他参数)

jQuery插件:

// Not builtin http://stackoverflow.com/a/5075798/2832282
(function ( $ ) {
    // Pass an object of key/vals to override
    $.fn.awesomeFormSerializer = function(overrides) {
        // Get the parameters as an array
        var newParams = this.serializeArray();

        for(var key in overrides) {
            var newVal = overrides[key]
            // Find and replace `content` if there
            for (index = 0; index < newParams.length; ++index) {
                if (newParams[index].name == key) {
                    newParams[index].value = newVal;
                    break;
                }
            }

            // Add it if it wasn't there
            if (index >= newParams.length) {
                newParams.push({
                    name: key,
                    value: newVal
                });
            }
        }

        // Convert to URL-encoded string
        return $.param(newParams);
    }
}( jQuery ));

2

现在有了ES15。您可以用它代替它来编辑当前提交的值(最短的一个)

var values = $("#frmblog").serializeArray();
values.find(input => input.name == 'content').value = content_val;
console.log(values);

或本机功能

var values = $("#frmblog").serializeArray();
values.find(function(input) { 
    return input.name == 'content';
}).value = content_val;
console.log(values);

0

使用对我有用的以下功能

function(elementName,newVal)
{
    var postData = $("#formID").serialize();

var res = postData.split("&");
var str = "";

for(i=0;i<res.length;i++)
  {
    if(elementName == res[i].split("=")[0])
      {
        str += elementName + "=" + newVal+ "&";
      }
      else
      {
        str += res[i] + "&";
      }
  }
return str;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.