$ .ajax를 사용하여 쿼리 문자열 대신 JSON을 보내는 방법은 무엇입니까?


172

누군가 jQuery가 쿼리 문자열 대신 실제 JSON을 보내도록 만드는 방법을 쉽게 설명 할 수 있습니까?

$.ajax({
    url      : url,
    dataType : 'json', // I was pretty sure this would do the trick
    data     : data,
    type     : 'POST',
    complete : callback // etc
});

실제로 신중하게 준비된 JSON을 쿼리 문자열로 변환합니다. 성가신 것 중 하나는 쿼리 찌르기의 한계로 인해 array: []객체의 모든 객체가로 변환된다는 array[]: []것입니다.


7
dataType데이터가 전송되는 아무런 관계가 없습니다. 호출에 의해 리턴 될 것으로 예상되는 데이터 유형을 지정합니다 . data속성에 어떤 유형의 데이터를 지정하고 있는지 서버 contentTypecontentType: "application/json"
Nope

설명해 주셔서 감사합니다. 그러나 서버가 응답에 컨텐츠 유형 헤더를 제공하는 경우 응답 유형을 클라이언트 측으로 지정해야하는 이유는 무엇입니까?
Redsandro

2
당신은하지 않습니다 , 그것을 지정하려면 기본적으로 jQuery를 시도하고 응답의 MIME 유형에 따라 지능형 추측을 할 것입니다. 그러나이를 지정하면 서버에서 예상되는 유형을 jQuery에 명시 적으로 알려주고 jQuery는 응답을 해당 유형의 객체로 변환하려고 시도합니다. 지정하지 않고 jQuery를 그대로두면 서버에서 JSON을 보내더라도 jQuery가 응답을 예기치 않은 형식으로 변환 할 수 있습니다. dataType에 대한 자세한 내용은 설명서를 확인하십시오. api.jquery.com/jQuery.ajax
Nope

답변:


256

당신은 사용할 필요가 JSON.stringify를 지정 먼저 직렬화 JSON에 개체에, 그리고 contentType서버가 그것의 JSON을 이해 있도록. 트릭을 수행해야합니다.

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    contentType: "application/json",
    complete: callback
});

JSON객체는 JavaScript 1.7 / ECMAScript 5 이상을 지원하는 브라우저에서 기본적으로 사용 가능합니다. 레거시 지원이 필요한 경우 json2 를 사용할 수 있습니다 .


14
작동하지 않습니다 contentType: 'application/json'. 누락되었습니다 .
Ohgodwhy

@Ohgodwhy 어 그래. 즉 너무 빨리 조금 갔다)
mekwall

1
감사. 나는 dataType이 이것을 처리한다고 생각했지만 그것을 뒤로했습니다. Bergi와 같은 콘텐츠 유형에 문자 세트를 지정하는 것에 대한 다른 생각은 다른 답변에서 했습니까?
Redsandro

5
@Redsandro 필요하지 않습니다. jQuery 문서에 따르면 :POST data will always be transmitted to the server using UTF-8 charset, per the W3C XMLHTTPRequest standard
mekwall

1
@ shorif2000 결코 늦지 않는 것이 낫습니다 ... 문제는 $_POSTPHP에서 볼 수 있다는 것입니다application/x-www-form-urlencoded 당신은 당신이해야하는 데이터를 JSON 읽으려면, file_get_contents("php://input")아마도 다음json_decode()
산티아고 arizti

28

아니요, dataType옵션 은 수신 된 데이터를 구문 분석하는 것입니다.

JSON을 게시하려면 직접 문자열을 JSON.stringify지정하고 processData옵션을로 설정해야 합니다 false.

$.ajax({
    url: url,
    type: "POST",
    data: JSON.stringify(data),
    processData: false,
    contentType: "application/json; charset=UTF-8",
    complete: callback
});

모든 브라우저가 JSON객체를 지원하는 것은 아니며 jQuery에는가 있지만 .parseJSONstringifier는 포함되어 있지 않습니다. 다른 polyfill 라이브러리가 필요합니다.


4
설정 processData하기 false때문에 필요하지 않습니다 JSON.stringify이미 문자열을 반환합니다.
mekwall

@MarcusEkwall : AFAIK 그것은 여전히 것이다 encodeURIComponent그것은하지 않을 에드?
Bergi

좋습니다. 필요하지 않을 수도 있지만 실제로 요청이 실패 할 것이라고 생각하십니까?
Bergi

이미 문자열이기 때문에 실패하지 않아야합니다.
Kevin B

1
@Redsandro : 예, "지능적인 추측"을하고 있습니다. 그러나 매개 변수의 이유는 사람들이 엄격하게 만들려는 것이 아니라 서버 응답에 적절한 MIME 유형을 설정하지 않기 때문입니다.
Bergi

5

ASP.NET MVC와 같은 많은 아키텍처에는 contentType으로 JSON.stringify를 처리하는 기능이 내장되어 있지만 내 상황이 약간 다르므로 나중에 누군가를 도울 수 있습니다. 시간이 절약되었을 것입니다!

내 http 요청이 다른 하위 도메인에있는 IBM (AS400 환경)의 CGI API에 의해 처리되므로이 요청은 교차 출처이므로 jsonp입니다. 실제로 자바 스크립트 객체를 통해 아약스를 보냅니다. 다음은 내 아약스 POST의 예입니다.

 var data = {USER : localProfile,  
        INSTANCE : "HTHACKNEY",  
        PAGE : $('select[name="PAGE"]').val(), 
        TITLE : $("input[name='TITLE']").val(), 
        HTML : html,
        STARTDATE : $("input[name='STARTDATE']").val(), 
        ENDDATE : $("input[name='ENDDATE']").val(),
        ARCHIVE : $("input[name='ARCHIVE']").val(), 
        ACTIVE : $("input[name='ACTIVE']").val(), 
        URGENT : $("input[name='URGENT']").val(), 
        AUTHLST :  authStr};
        //console.log(data);
       $.ajax({
            type: "POST",
           url:   "http://www.domian.com/webservicepgm?callback=?",
           data:  data,
           dataType:'jsonp'
       }).
       done(function(data){
         //handle data.WHATEVER
       });

2
이 질문에 더 많은 지식을 추가해 주셔서 감사합니다! 만족스러운 답변이 이미 제공되었지만 귀하의 의견을 표명했습니다.
Redsandro

1

이것을 asp.net으로 다시 보내고 request.form []의 데이터가 필요한 경우, 컨텐츠 유형을 "application / x-www-form-urlencoded; charset = utf-8"로 설정해야합니다.

원래 게시물은 여기

두 번째로 Datatype을 제거하십시오. 리턴을 기대하지 않으면 POST는 약 4 분 동안 기다렸다가 실패합니다. 여기를 참조 하십시오

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