jQuery에서 직렬화 된 양식 데이터를 어떻게 수정합니까?


81

AJAX에서 양식을 제출하려고하므로 데이터를 직렬화 ()해야합니다. 그러나 나는 사용 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);
}

직렬화하기 전에 삽입하지 않는 이유는 무엇입니까?
Adam Arold

문제는 serilization 프로세스 중에 'content'키에 일부 기본값이 설정되어 있기 때문에 새 값을 첨부 할 수없고 이미있는 값을 업데이트해야한다는 것입니다
Bluemagica

아, 그게 상황을 바꾼다. 내 업데이트 된 답변을 참조하십시오.
TJ Crowder

답변:


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

업데이트 : 나중에 추가 된 댓글에서 다음과 같이 말했습니다.

문제는 serilization 프로세스 중에 'content'키에 일부 기본값이 설정되어 있으므로 새 값을 첨부 할 수 없으며 이미있는 값을 업데이트해야합니다. "

그것은 상황을 변화시킵니다. contentURL로 인코딩 된 문자열 내에서 찾는 것은 고통스럽기 때문에 배열을 사용하겠습니다.

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',
})

매개 변수 'foo'를 값 'bar'(또는 객체에 추가 한 다른 매개 변수)로 바꾸거나 추가합니다.

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

1

나를 위해 일한 다음 기능을 사용하십시오.

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;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.