$ ajax POST에서 매개 변수를 전달하는 방법은 무엇입니까?

이 링크에 명시된대로 튜토리얼을 따랐습니다 . 어떤 이유로 든 아래 코드에서 데이터가 매개 변수로 URL에 추가되지 않지만 사용하여 URL에 직접 설정 /?field1="hello"하면 작동합니다.

$.ajax({
        url: 'superman',
        type: 'POST',
        data: { field1: "hello", field2 : "hello2"} ,
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            alert(response.status);
        },
        error: function () {
            alert("error");
        }
    }); 

간단한 경우에 jQuery의 구문 $.post또는 $.get구문을 사용하는 것이 좋습니다 .

$.post('superman', { field1: "hello", field2 : "hello2"}, 
    function(returnedData){
         console.log(returnedData);
});

실패 사례를 포착해야하는 경우 다음을 수행하십시오.

$.post('superman', { field1: "hello", field2 : "hello2"}, 
    function(returnedData){
         console.log(returnedData);
}).fail(function(){
      console.log("error");
});

또한 항상 JSON 문자열을 보내면 맨 끝에 하나 이상의 매개 변수와 함께 $ .getJSON 또는 $ .post를 사용할 수 있습니다 .

$.post('superman', { field1: "hello", field2 : "hello2"}, 
     function(returnedData){
        console.log(returnedData);
}, 'json');

GET 방법을 사용해보십시오.

var request = $.ajax({
    url: 'url',
    type: 'GET',
    data: { field1: "hello", field2 : "hello2"} ,
    contentType: 'application/json; charset=utf-8'
});

request.done(function(data) {
      // your success code here
});

request.fail(function(jqXHR, textStatus) {
      // your failure code here
});

POST 메소드가있는 URL에서 매개 변수를 볼 수 없습니다.

편집하다:

지원 중단 공지 : jqXHR.success (), jqXHR.error () 및 jqXHR.complete () 콜백은 jQuery 3.0부터 제거되었습니다. 대신 jqXHR.done (), jqXHR.fail () 및 jqXHR.always ()를 사용할 수 있습니다.

Jquery.ajax 는 POST 데이터를 GET 데이터에 대해 자동으로 인코딩하지 않습니다. Jquery는 데이터가 요청 본문에 추가되어 유선을 통해 직접 전송되도록 사전 형식화 될 것으로 예상합니다.

해결책은 jQuery.param 함수 를 사용하여 POST 요청을 처리하는 대부분의 스크립트가 예상하는 쿼리 문자열을 작성하는 것입니다.

$.ajax({
    url: 'superman',
    type: 'POST',
    data: jQuery.param({ field1: "hello", field2 : "hello2"}) ,
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    success: function (response) {
        alert(response.status);
    },
    error: function () {
        alert("error");
    }
}); 

이 경우 param메소드는 데이터를 다음과 같이 형식화합니다.

field1=hello&field2=hello2

Jquery.ajax의 문서라는 플래그가 있다고 processData이 인코딩이 자동 여부 수행 여부를 그 컨트롤. 설명서에는 기본값이이라고 표시되어 true있지만 이것이 POST사용될 때 관찰되는 동작은 아닙니다 .

    function FillData() {
    var param = $("#<%= TextBox1.ClientID %>").val();
    $("#tbDetails").append("<img src='Images/loading.gif'/>");
    $.ajax({
        type: "POST",/*method type*/
        contentType: "application/json; charset=utf-8",
        url: "Default.aspx/BindDatatable",/*Target function that will be return result*/
        data: '{"data":"' + param + '"}',/*parameter pass data is parameter name param is value */
        dataType: "json",
        success: function(data) {
               alert("Success");
            }
        },
        error: function(result) {
            alert("Error");
        }
    });   
}

A의 POST 요청 , 매개 변수는 사용자가 URL에 그들을 볼 수없는 이유 요청 본문에 전송됩니다.

당신이 그들을보고 싶다면, 변경

    type: 'POST',

에

    type: 'GET',

브라우저에는 코드로 발생하는 전체 요청을 볼 수있는 개발 도구가 있습니다. Chrome에서는 '네트워크'패널에 있습니다.

$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello",
        "field2": "hello1"
      },
      success: function (response) {
        alert("Success !!");
      },
      error: function () {
        alert("Error !!");
      }
   }
);

type: 'POST'는 URL에 표시되지 않는 ** 요청의 본문에 ** 파라미터 를 추가 하고 , 보이는 URL에 매개 변수를 추가 합니다.type: 'GET'

가장 많이 사용되는 웹 브라우저에는 완전한 요청 을 표시하는 네트워크 패널이 있습니다.

네트워크 패널에서 XHR 을 선택 하여 요청 을보십시오 .

이 작업을 통해 수행 할 수도 있습니다.

$.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response) {
        alert("Success !");
      }
    );

$ .ajax 또는 $ .post를 사용하여 할 수 있습니다

$ .ajax 사용 :

    $.ajax({
      type: 'post',
      url: 'superman',
      data: { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      success: function (response) {
        alert(response.status);
      },
      error: function () {
        alert("error");
      }
   });

$ .post 사용 :

    $.post('superman',
      { 
        'field1': 'hello', 
        'field2': 'hello1'
      },
      function (response, status) {
        alert(response.status);
      }
    );

JSON 키를 문자열로 전달하지 않는 한 코드가 옳았습니다.

주위에 큰 따옴표 나 작은 따옴표가 있어야합니다.

{ "field1": "hello", "field2": "hello2"}

$.ajax(
   {
      type: 'post',
      url: 'superman',
      data: { 
        "field1": "hello", // Quotes were missing
        "field2": "hello1" // Here also
      },
      success: function (response) {
        alert(response);
      },
      error: function () {
        alert("error");
      }
   }
);

POST메소드의 url에 매개 변수를 보내 려면 다음과 같이 url에 간단히 추가 할 수 있습니다.

$.ajax({
    type: 'POST',
    url: 'superman?' + jQuery.param({ f1: "hello1", f2 : "hello2"}),
    // ...
});