jquery-$ .post ()가 contentType = application / json을 사용하게 만드는 방법은 무엇입니까?

jquery에서 $ .post ()를 사용할 때 기본 contentType이 application / x-www-form-urlencoded라는 것을 알았습니다. 내 asp.net mvc 코드에 contentType = application / json이 있어야하는 경우

(: 나는 응용 프로그램 / JSON 사용해야하는 이유에 대한이 질문을 참조하십시오 - 해당 필드에 값이 않은 경우는 "X 필드가 필요합니다"왜 ModelState.IsValid의 거짓이 ASPNET MVC를? )

$ .post ()가 contentType = application / json을 보내도록하려면 어떻게해야합니까? 이미 많은 $ .post () 함수가 있으므로 너무 많은 시간이 걸리기 때문에 $ .ajax ()로 변경하고 싶지 않습니다.

내가 시도하면

$.post(url, data, function(), "json") 

여전히 contentType = application / x-www-form-urlencoded가 있습니다. 컨텐츠 유형을 json으로 변경하지 않으면 "json"매개 변수는 정확히 무엇을 수행합니까?

내가 시도하면

$.ajaxSetup({
  contentType: "application/json; charset=utf-8"
});

그것은 작동하지만 내가 가지고있는 모든 $ .get 및 $ .post에 영향을 미치고 일부는 깨지게합니다.

contentType = application / json을 보내도록 $ .post ()의 동작을 변경할 수있는 방법이 있습니까?

당신이해야 할 것 같아요

1. $ .post가 항상 JSON 데이터 유형을 사용하도록 소스를 수정하십시오. 실제로는 미리 구성된 $.ajax호출 의 바로 가기이므로

또는

2. 사용하려는 구성에 대한 바로 가기 인 고유 한 유틸리티 기능을 정의하십시오.$.ajax

또는

3. $.post function원숭이 패치를 통해 자신의 구현으로 덮어 쓸 수 있습니다.

예제에서 JSON 데이터 유형 은 서버로 전송 된 형식이 아니라 서버 에서 반환 된 데이터 유형을 나타냅니다 .

$.ajax({
  url:url,
  type:"POST",
  data:data,
  contentType:"application/json; charset=utf-8",
  dataType:"json",
  success: function(){
    ...
  }
})

참조 : jQuery.ajax ()

마침내 나는 해결책을 찾았습니다.

jQuery.ajax ({
    url: myurl,
    type: "POST",
    data: JSON.stringify({data:"test"}),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(){
        //
    }
});

스크립트에서 jQuery에 다음 메소드를 추가했습니다.

jQuery["postJSON"] = function( url, data, callback ) {
    // shift arguments if data argument was omitted
    if ( jQuery.isFunction( data ) ) {
        callback = data;
        data = undefined;
    }

    return jQuery.ajax({
        url: url,
        type: "POST",
        contentType:"application/json; charset=utf-8",
        dataType: "json",
        data: data,
        success: callback
    });
};

그리고 그것을 사용하려면

$.postJSON('http://url', {data: 'goes', here: 'yey'}, function (data, status, xhr) {
    alert('Nailed it!')
});

이것은 원래 JQuery 소스에서 "get"및 "post"코드를 복사하고 JSON POST를 강제하기 위해 몇 가지 매개 변수를 하드 코딩하여 수행되었습니다.

감사!

그냥 사용

jQuery.ajax ({
    url: myurl,
    type: "POST",
    data: mydata,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(){
        //
    }
});

@ JK 업데이트 : $ .post로 하나의 코드 예제 만 작성 하면 답변에서 해당 예제가 하나 있습니다. $ .post와 $ .get은 $ .ajax의 짧은 형식입니다. 따라서 $ .ajax를 사용하면 전역 설정을 변경하지 않고도 전체 매개 변수 세트를 사용할 수 있습니다.

그런데 표준 $ .post를 덮어 쓰지 않는 것이 좋습니다. 그건 내 개인적인 견해 지만, 나를위한 것이 중요뿐만 아니라 프로그램의 작품뿐만 아니라, 프로그램을 읽는 모든 사람이 같은 방법으로 그것을 이해하고있다. 매우 중요한 이유없이 표준 방법 을 덮어 쓰면 프로그램 코드 를 읽을 때 오해 할 수 있습니다 . 내가 추천 한 번 더 반복 그래서 : 단지 대신에 jQuery를 형성 아약스 원래의 $를 사용 jQuery.get하고 jQuery.post당신은 완벽하게 작동뿐만 아니라 프로그램을받을 수 있지만 오해없이 사람들이 읽을 수 있습니다.

post ()에 마지막 매개 변수로 전달할 수있는 "json"데이터 유형은 요청에서 전송하는 유형이 아니라 서버 응답에서 함수가 예상하는 데이터 유형을 나타냅니다. 특히 "Accept"헤더를 설정합니다.

솔직히 가장 좋은 방법은 ajax () 호출로 전환하는 것입니다. post () 함수는 편의상 의미가 있습니다. 간단한 양식 게시를 할 때 간단한 ajax () 호출이 필요합니다. 당신은하지 않습니다.

실제로 전환하지 않으려면 xpost ()와 같은 자체 함수를 만들고 지정된 매개 변수를 내용 유형 세트와 함께 jQuery ajax () 호출에 대한 매개 변수로 간단히 변환 할 수 있습니다. 그렇게하면 모든 post () 함수를 ajax () 함수로 다시 작성하지 않고 post에서 xpost (또는 무엇이든)로 변경해야합니다.

나는 이것이 늦은 대답이라는 것을 알고 있습니다. 실제로 MS 기반 서비스에 대한 게시 / 읽기에 사용하는 바로 가기 방법이 있습니다 .. ASMX뿐만 아니라 MVC에서도 작동합니다 ...

사용하다:

$.msajax(
  '/services/someservice.asmx/SomeMethod'
  ,{}  /*empty object for nothing, or object to send as Application/JSON */
  ,function(data,jqXHR) {
    //use the data from the response.
  }
  ,function(err,jqXHR) {
    //additional error handling.
  }
);

//sends a json request to an ASMX or WCF service configured to reply to JSON requests.
(function ($) {
  var tries = 0; //IE9 seems to error out the first ajax call sometimes... will retry up to 5 times

  $.msajax = function (url, data, onSuccess, onError) {
    return $.ajax({
      'type': "POST"
      , 'url': url
      , 'contentType': "application/json"
      , 'dataType': "json"
      , 'data': typeof data == "string" ? data : JSON.stringify(data || {})
      ,beforeSend: function(jqXHR) {
        jqXHR.setRequestHeader("X-MicrosoftAjax","Delta=true");
      }
      , 'complete': function(jqXHR, textStatus) {
        handleResponse(jqXHR, textStatus, onSuccess, onError, function(){
          setTimeout(function(){
            $.msajax(url, data, onSuccess, onError);
          }, 100 * tries); //try again
        });
      }
    });
  }

  $.msajax.defaultErrorMessage = "Error retreiving data.";


  function logError(err, errorHandler, jqXHR) {
    tries = 0; //reset counter - handling error response

    //normalize error message
    if (typeof err == "string") err = { 'Message': err };

    if (console && console.debug && console.dir) {
      console.debug("ERROR processing jQuery.msajax request.");
      console.dir({ 'details': { 'error': err, 'jqXHR':jqXHR } });
    }

    try {
      errorHandler(err, jqXHR);
    } catch (e) {}
    return;
  }


  function handleResponse(jqXHR, textStatus, onSuccess, onError, onRetry) {
    var ret = null;
    var reterr = null;
    try {
      //error from jqXHR
      if (textStatus == "error") {
        var errmsg = $.msajax.defaultErrorMessage || "Error retreiving data.";

        //check for error response from the server
        if (jqXHR.status >= 300 && jqXHR.status < 600) {
          return logError( jqXHR.statusText || msg, onError, jqXHR);
        }

        if (tries++ < 5) return onRetry();

        return logError( msg, onError, jqXHR);
      }

      //not an error response, reset try counter
      tries = 0;

      //check for a redirect from server (usually authentication token expiration).
      if (jqXHR.responseText.indexOf("|pageRedirect||") > 0) {
        location.href = decodeURIComponent(jqXHR.responseText.split("|pageRedirect||")[1].split("|")[0]).split('?')[0];
        return;
      }

      //parse response using ajax enabled parser (if available)
      ret = ((JSON && JSON.parseAjax) || $.parseJSON)(jqXHR.responseText);

      //invalid response
      if (!ret) throw jqXHR.responseText;  

      // d property wrap as of .Net 3.5
      if (ret.d) ret = ret.d;

      //has an error
      reterr = (ret && (ret.error || ret.Error)) || null; //specifically returned an "error"

      if (ret && ret.ExceptionType) { //Microsoft Webservice Exception Response
        reterr = ret
      }

    } catch (err) {
      reterr = {
        'Message': $.msajax.defaultErrorMessage || "Error retreiving data."
        ,'debug': err
      }
    }

    //perform final logic outside try/catch, was catching error in onSuccess/onError callbacks
    if (reterr) {
      logError(reterr, onError, jqXHR);
      return;
    }

    onSuccess(ret, jqXHR);
  }

} (jQuery));

참고 : json.org의 JS 파일에서 수정 된 JSON.parseAjax 메소드도 있습니다.이 메소드는 MS "/Date(...)/"날짜에 대한 처리를 추가합니다 ...

수정 된 json2.js 파일은 포함되어 있지 않으며 IE8의 경우 스크립트 기반 파서를 사용합니다. 배열 및 / 또는 객체의 프로토 타입을 확장 할 때 기본 파서가 중단되는 경우가 있기 때문입니다.

약속 인터페이스를 구현하기 위해이 코드를 수정하는 것을 고려하고 있었지만 실제로 잘 작동했습니다.

$ .postJSON ()에 대한 이 간단한 jquery API 확장 ( https://benjamin-schweizer.de/jquerypostjson.html )이 트릭을 수행합니다. 다른 모든 기본 jquery Ajax 호출과 같이 postJSON ()을 사용할 수 있습니다. 이벤트 핸들러 등을 첨부 할 수 있습니다.

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

AngularJS의 $ http와 같은 다른 Ajax API와 마찬가지로 올바른 contentType을 application / json으로 설정합니다. 여기에 문자열 화되므로 json 데이터 (자바 스크립트 객체)를 직접 전달할 수 있습니다. 예상되는 리턴 된 dataType이 JSON으로 설정되어 있습니다. 약속을 위해 jquery의 기본 이벤트 핸들러를 첨부 할 수 있습니다 (예 :

$.postJSON(apiURL, jsonData)
 .fail(function(res) {
   console.error(res.responseText);
 })
 .always(function() {
   console.log("FINISHED ajax post, hide the loading throbber");
 });

문제의 핵심은 getJSON이 존재하고 옳은 일을하는 동안 JQuery가 postJSON 메소드를 가지고 있지 않다는 사실입니다.

postJSON 메소드는 다음을 수행합니다.

postJSON = function(url,data){
    return $.ajax({url:url,data:JSON.stringify(data),type:'POST', contentType:'application/json'});
};

다음과 같이 사용할 수 있습니다.

postJSON( 'path/to/server', my_JS_Object_or_Array )
    .done(function (data) {
        //do something useful with server returned data
        console.log(data);
    })
    .fail(function (response, status) {
        //handle error response
    })
    .always(function(){  
      //do something useful in either case
      //like remove the spinner
    });

문서는 3.0로, 당신은 $ 아약스 옵션을 사용할 수 있다는 것을 의미, 설정 개체를 받아 들일 것입니다 .post를 $ 것을 현재 보여줍니다. 3.0은 아직 출시되지 않았으며 커밋 에 대해 문서에서 참조를 숨기는 것에 대해 이야기하고 있지만 앞으로는 참조하십시오!

다음 JavaScript 코드와 비슷한 문제가 있습니다.

var url = 'http://my-host-name.com/api/Rating';

var rating = { 
  value: 5,
  maxValue: 10
};

$.post(url, JSON.stringify(rating), showSavedNotification);

피들러 어디에서 요청을 볼 수 있습니까?

• 헤더: Content-Type: application/x-www-form-urlencoded; charset=UTF-8
• 신체: {"value":"5","maxValue":"5"}

결과적으로 서버가 객체를 서버 측 유형에 매핑 할 수 없습니다.

마지막 줄을 이것으로 바꾼 후 :

$.post(url, rating, showSavedNotification);

피들러에서는 여전히 볼 수 있습니다.

• 헤더: Content-Type: application/x-www-form-urlencoded; charset=UTF-8
• 신체: value=5&maxValue=10

그러나 서버가 예상 한 것을 반환하기 시작했습니다.

자신의 어댑터 / 래퍼는 어떻습니까?

//adapter.js
var adapter = (function() {

return {

    post: function (url, params) {
        adapter.ajax(url, "post", params);
        },
    get: function (url, params) {
        adapter.ajax(url, "get", params);
    },
    put: function (url, params) {
        adapter.ajax(url, "put", params);
    },
    delete: function (url, params) {
        adapter.ajax(url, "delete", params);
    },
    ajax: function (url, type, params) {
        var ajaxOptions = {
            type: type.toUpperCase(),
            url: url,
            success: function (data, status) {
                var msgType = "";
                // checkStatus here if you haven't include data.success = true in your
                // response object
                if ((params.checkStatus && status) || 
                   (data.success && data.success == true)) {
                            msgType = "success";
                            params.onSuccess && params.onSuccess(data);
                    } else {
                            msgType = "danger";
                            params.onError && params.onError(data);
                    }
            },
            error: function (xhr) {
                    params.onXHRError && params.onXHRError();
                    //api.showNotificationWindow(xhr.statusText, "danger");
            }
        };
        if (params.data) ajaxOptions.data = params.data;
        if (api.isJSON(params.data)) {
            ajaxOptions.contentType = "application/json; charset=utf-8";
            ajaxOptions.dataType = "json";
        }
        $.ajax($.extend(ajaxOptions, params.options));
    }
})();

    //api.js
var api = {
  return {
    isJSON: function (json) {
        try {
            var o = JSON.parse(json);
            if (o && typeof o === "object" && o !== null) return true;
        } catch (e) {}
        return false;
    }
  }
})();

그리고 매우 간단한 사용법 :

adapter.post("where/to/go", {
    data: JSON.stringify(params),
    onSuccess: function (data) {
        //on success response...
    }
    //, onError: function(data) {  //on error response... }
    //, onXHRError: function(xhr) {  //on XHR error response... }
});

어떤 이유로 @Adrien이 제안한대로 ajax 요청에서 컨텐츠 유형을 설정하면 제 경우 작동하지 않습니다. 그러나 실제로 다음을 수행하여 $ .post를 사용하여 컨텐츠 유형을 변경할 수 있습니다.

$.ajaxSetup({
    'beforeSend' : function(xhr) {
        xhr.overrideMimeType('application/json; charset=utf-8');
    },
});

그런 다음 $.post전화하십시오.

$.post(url, data, function(), "json")

jQuery + IIS에 문제가 있었고 이것이 jQuery가 ajax 요청에 Windows-1252 인코딩을 사용하는 것을 이해하도록 도와주는 유일한 솔루션이었습니다.

$ .post에서 이와 같이 Content-type을 변경할 수 있습니다

$ .post (url, data, function (data, status, xhr) {xhr.setRequestHeader ( "Content-type", "application / x-www-form-urlencoded; charset = utf-8");});

CORS (Cross Origin Resource Sharing) 문제가있는 경우 $ .post가 작동하지 않습니다. 다음 형식으로 $ .Ajax를 사용하십시오. "$ .ajax ({url : someurl, contentType : 'application / json', data : requestInJSONFormat, headers : { 'Access-Control-Allow-Origin': '*'}, dataType : 'json', 유형 : 'POST', 비동기 : false, 성공 : function (Data) {...}}); "

application/json직접 보낼 수는 없습니다 . GET / POST 요청의 매개 변수 여야합니다.

그래서 같은

$.post(url, {json: "...json..."}, function());