jQuery : serialize () 양식 및 기타 매개 변수


115

단일 AJAX 요청으로 양식 요소 ( .serialize()메서드로 직렬화 됨 ) 및 기타 매개 변수 를 보낼 수 있습니까?

예:

$.ajax({
    type : 'POST',
    url : 'url',
    data : {
        $('#form').serialize(),
        par1 : 1,
        par2 : '2',
        par3: 232
    }
}

다른 매개 변수와 함께 양식을 제출하는 가장 좋은 방법은 무엇입니까?

감사

답변:


236

serialize() 단순히 문자열에 추가 할 수 있으므로 양식 값을 유효한 쿼리 문자열로 효과적으로 변환합니다.

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}

7
@Falcon 여기서 코코넛 이란 무엇을 의미 합니까?
Shafizadeh 2015

1을 변수로 변경하려면 어떻게해야
하나요

3
@Shafizadeh 그것의 운율 (많이 - 코코넛)
아담

왜 여기에 contentType이 필요하지 않은지 말씀해 주시겠습니까 ?? 기본적으로 추가됩니까?
kernal lora

예, 인코딩 된 양식 URL이 기본값입니다. 자세한 내용은 jquery 문서를 참조하십시오
Rory McCrossan

77

또는 일부 개체 변수에 매개 변수를 저장 form.serialize()하는 $.param(object)경우 with를 사용할 수 있습니다 . 사용법은 다음과 같습니다.

var data = form.serialize() + '&' + $.param(object)

자세한 내용은 http://api.jquery.com/jQuery.param 을 참조하십시오.


10
난이게 좋아. 추악한 쿼리 문자열을 볼 필요가 없음을 의미합니다!
Greg Woods

4
이것이 훨씬 더 나은 방법입니다. 허용되는 대답은 지저분하며 어떤 프로덕션 응용 프로그램에서도 사용해서는 안됩니다.
FastTrack

3
프로덕션 환경에 대해 이야기하는 경우 이러한 답변을 사용해서는 안됩니다. 는 form그것이 하나의 호출에 연재 할 수 있도록하는 것이 (숨겨진 필드 필요한 경우에) 모든 정보를 포함해야합니다. 이렇게하면 JS가 비활성화되거나 실패하는 경우 양식 제출에 여전히 안전 장치가 있어야하며 전송시 모든 데이터를 포함해야합니다.
Rory McCrossan

9

나는 모르지만 위의 어느 것도 나를 위해 일하지 않았고, 나는 이것을 사용했고 그것은 작동했습니다.

양식의 직렬화 된 배열에서 키 값 쌍으로 저장됩니다.

여기에 양식 변수에 새 값을 넣은 다음이 변수를 바로 전달할 수 있습니다.

var form = $('form.sigPad').serializeArray();
var uniquekey = {
      name: "uniquekey",
      value: $('#UniqueKey').val()
};
form.push(uniquekey);

1

직렬화 양식으로 데이터를 보내려면 이것을 시도하십시오.

var form= $("#formId");
$.ajax({
    type: form.attr('method'),
    url: form.attr('action'),
    data: form.serialize()+"&variable="+otherData,
    success: function (data) {
    var result=data;
    $('#result').attr("value",result);

    }
});

0

이와 같은 매개 변수의 값을 전달하십시오.

data : $('#form_id').serialize() + "&parameter1=value1&parameter2=value2"

등등.


0

Rory McCrossan의 대답에 따라 정수 배열 (거의 .NET 용) 을 보내려는 경우 다음 코드가 있습니다.

// ...

url: "MyUrl",       //  For example --> @Url.Action("Method", "Controller")
method: "post",
traditional: true,  
data: 
    $('#myForm').serialize() +
    "&param1="xxx" +
    "&param2="33" +
    "&" + $.param({ paramArray: ["1","2","3"]}, true)
,             

// ...

-1

다른 양식의 내용과 함께 jQuery를 사용하여 보조 양식을 만든 다음 다른 매개 변수에 추가하여 ajax 호출에서만 직렬화하면됩니다.

function createInput(name,value){
    return $('<input>').attr({
        name: name,
        value: value
    });
}
$form = $("<form></form>");
$form.append($("#your_form input").clone());
$form.append(createInput('input_name', 'input_value'));
$form.append(createInput('input_name_2', 'input_value_2'));
....

$.ajax({
    type : 'POST',
    url : 'url',
    data : $form.serialize()
}

-1

나는 under 문으로 문제를 해결합니다. URL과 동일한 GET 방법으로 데이터 보내기

$.ajax({
    url: 'includes/get_ajax_function.php?value=jack&id='+id,
    type: 'post',
    data: $('#b-info1').serializeArray(),

$_REQUEST['value']OR로 가치 얻기$_GET['id']


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