Làm cách nào để sửa đổi dữ liệu biểu mẫu được tuần tự hóa trong jQuery?


81

Tôi đang cố gắng gửi biểu mẫu của mình trong AJAX, vì vậy tôi phải tuần tự hóa () dữ liệu. Nhưng tôi đang sử dụng fckEditorvà jQuery không biết làm thế nào để xử lý nó, vì vậy sau khi tuần tự hóa, tôi đang cố gắng sửa đổi giá trị theo cách thủ công, nhưng không may mắn cho đến nay ... mọi ý kiến

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);
}

Tại sao bạn không chèn nó trước khi đăng tuần tự?
Adam Arold

Vấn đề là, có một số giá trị mặc định được thiết lập trong 'content' chìa khóa trong quá trình serilization, vì vậy tôi không thể chỉ đính kèm một giá trị mới, tôi phải cập nhật một trong những đã có trong nó
Bluemagica

Ah, điều đó thay đổi mọi thứ; xem câu trả lời cập nhật của tôi.
TJ Crowder

Câu trả lời:


152

serializetrả về một chuỗi được mã hóa URL chứa các trường biểu mẫu. Nếu bạn cần thêm vào nó, bạn làm như vậy bằng cách sử dụng các quy tắc chuỗi được mã hóa URL chuẩn, ví dụ:

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

(Điều trên giả định sẽ luôn có một giá trị valuessau serializecuộc gọi; nếu điều đó không nhất thiết là đúng, hãy xác định xem có nên sử dụng hay không &dựa trên việc valuescó trống không trước khi bạn thêm vào nó.)

Ngoài ra, nếu muốn, bạn có thể sử dụng serializeArrayvà sau đó thêm vào mảng và sử dụng jQuery.paramđể biến kết quả thành một chuỗi truy vấn, nhưng điều đó có vẻ là một chặng đường dài:

// 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);

Cập nhật : Trong một nhận xét được thêm vào sau đó, bạn đã nói:

Vấn đề là, có một số giá trị mặc định đang được đặt trong khóa 'nội dung' trong quá trình cách ly, vì vậy tôi không thể chỉ đính kèm một giá trị mới, tôi phải cập nhật giá trị đã có trong đó "

Điều đó thay đổi mọi thứ. Thật khó để tìm kiếm contenttrong chuỗi được mã hóa URL, vì vậy tôi sẽ đi với mảng:

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);

Bạn có thể muốn biến điều này thành một chức năng có thể tái sử dụng.


4

Đây là một plugin jquery đầy đủ dựa trên câu trả lời của @ TJ. Bạn có thể gọi

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

Điều này sẽ thay thế hoặc thêm tham số 'foo' bằng giá trị 'thanh' (hoặc bất kỳ tham số nào khác mà bạn thêm vào đối tượng)

plugin 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

Với ES15 bây giờ. Bạn có thể sử dụng cái này thay vì cái này để chỉnh sửa giá trị đã gửi hiện tại (cái ngắn nhất)

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

hoặc chức năng gốc

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

0

sử dụng chức năng sau nó đã làm việc cho tôi

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;
}
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.