Development Tip

jQuery로 JSON 데이터 보내기

yourdevel 2020. 11. 6. 20:43
반응형

jQuery로 JSON 데이터 보내기


아래 코드 City=Moscow&Age=25가 JSON 형식 대신 데이터를 보낸 이유는 무엇 입니까?

var arr = {City:'Moscow', Age:25};
$.ajax(
   {
        url: "Ajax.ashx",
        type: "POST",
        data: arr,
        dataType: 'json',
        async: false,
        success: function(msg) {
            alert(msg);
        }
    }
);

요청 콘텐츠 유형을 지정하지 않았거나 올바른 JSON 요청을 지정하지 않았기 때문입니다. JSON 요청을 보내는 올바른 방법은 다음과 같습니다.

var arr = { City: 'Moscow', Age: 25 };
$.ajax({
    url: 'Ajax.ashx',
    type: 'POST',
    data: JSON.stringify(arr),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    async: false,
    success: function(msg) {
        alert(msg);
    }
});

주의 사항 :

  • JSON.stringify자바 스크립트 객체를 최신 브라우저에 기본 제공되는 JSON 문자열로 변환하는 방법 사용 . 이전 브라우저를 지원하려면 json2.js 를 포함해야 할 수 있습니다.
  • contentTypeJSON 요청을 보낼 의도를 서버에 표시하기 위해 속성을 사용하여 요청 콘텐츠 유형 지정
  • dataType: 'json'속성은 서버에서 예상하는 응답 유형에 사용됩니다. jQuery는 서버 응답 헤더 에서 추측수있을만큼 지능적 Content-Type입니다. 따라서 HTTP 프로토콜을 어느 정도 존중하고 Content-Type: application/json요청에 응답하는 웹 서버가있는 경우 jQuery는 응답을 자바 스크립트 객체로 success콜백 으로 자동 구문 분석 하므로 dataType속성 을 지정할 필요가 없습니다 .

주의해야 할 사항 :

  • 당신이 부르는 arr것은 배열아닙니다 . 속성 ( CityAge) 이있는 자바 스크립트 개체입니다 . 배열은 []자바 스크립트 로 표시됩니다 . 예를 들어 [{ City: 'Moscow', Age: 25 }, { City: 'Paris', Age: 30 }]두 개체의 배열입니다.

기본적으로 jQuery는 data매개 변수로 전달 된 객체 $.ajax. $.param데이터를 쿼리 문자열로 변환하는 데 사용 합니다.

에 대한 jQuery 문서에서 $.ajax:

[ data인수]는 아직 문자열이 아닌 경우 쿼리 문자열로 변환됩니다.

JSON을 보내려면 직접 인코딩해야합니다.

data: JSON.stringify(arr);

참고 JSON.stringify최신 브라우저에서만 존재합니다. 레거시 지원은 json2.js를 참조하십시오.


JSON 게시를위한 간단한 편의 기능을 작성했습니다.

$.postJSON = function(url, data, success, args) {
  args = $.extend({
    url: url,
    type: 'POST',
    data: JSON.stringify(data),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    async: true,
    success: success
  }, args);
  return $.ajax(args);
};

$.postJSON('test/url', data, function(result) {
  console.log('result', result);
});

올바른 콘텐츠 유형을 설정하고 개체를 문자열 화해야합니다.

var arr = {City:'Moscow', Age:25};
$.ajax({
    url: "Ajax.ashx",
    type: "POST",
    data: JSON.stringify(arr),
    dataType: 'json',
    async: false,
    contentType: 'application/json; charset=utf-8',
    success: function(msg) {
        alert(msg);
    }
});

URI가 기본적으로 POST 요청의 이름 값 쌍을 읽을 수 있도록 직렬화됩니다. processData : false를 매개 변수 목록에 설정해 볼 수 있습니다. 도움이되는지 확실하지 않습니다.

참고URL : https://stackoverflow.com/questions/6587221/send-json-data-with-jquery

반응형