자바 스크립트 : Ajax로 JSON 객체를 보내시겠습니까?


151

이게 가능해?

xmlHttp.send({
    "test" : "1",
    "test2" : "2",
});

어쩌면 : 헤더가 content type: application/json? :

xmlHttp.setRequestHeader('Content-Type', 'application/json')

그렇지 않으면 사용할 수 있습니다.

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')

그런 다음 JSON.stringifyJSON 객체를 매개 변수로 보내지 만 가능하면이 방법으로 보내면 좋습니다.

답변:


330

jQuery로 :

$.post("test.php", { json_string:JSON.stringify({name:"John", time:"2pm"}) });

jQuery없이 :

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/json-handler");
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify({name:"John Rambo", time:"2pm"}));

2
그러나 남자는 content-type을 사용할 수 있습니다 : application/x-www-form-urlencodedstringify를 사용하면 사용할 점은 무엇 application/json입니까? :)
Adam

4
@CIRK : 무슨 상관이야? 컨텐츠 유형 설정은 서버가 하나 또는 다른 것을 특별히 처리하지 않는 한 완전히 임의적입니다. 하루가 끝나면 데이터가 앞뒤로 흐릅니다.
mellamokb 2016 년

17
글 본문이 JSON 일 것으로 예상되는 경우 (예 : {{:: John ", time :"2pm "}) 글 본문이 urlencoded 데이터 인 경우 (name = John & time = 2pm) application / x-www-form-urlencoded
Nathan Romano

1
URL을 어디에 두어야합니까?
Aaron Liu

6
@ShuruiLiu는 URL이 대신 이동 "/json-handler"의 제 2의 PARAM로 open()방법
알렉산드르 무기 호

36

jQuery를 사용하지 않는 경우 다음을 확인하십시오.

var json_upload = "json_name=" + JSON.stringify({name:"John Rambo", time:"2pm"});
var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", "/file.php");
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(json_upload);

그리고 PHP 수신 끝의 경우 :

 $_POST['json_name'] 

직접 사용할 수 없습니까?
rohitsakala

8
나는 이것이 묻는 질문에 대답하지 않는다고 생각합니다. 필자는 개발자가 Urlencoded 래퍼로 싸이 지 않고 Content-Type : application / json으로 PHP에 JSON Blob을 PHP에 보내려고한다고 생각합니다.
Fordi

1
이것은 실제로 JSON을 보내는 것이 아니라 formdata를 보내는 것입니다. JSON을 직접 보낼 수도 있습니다.이 경우 $ _POST로 읽을 수 없지만 대신 json_decode (file_get_contents ( 'php : // input'))로 읽을 수 있습니다.
David

친애하는 친구 여러분은이 POST 아약스를 페이지에서 사용하기 위해 필요한 전체 코드와 공유 할 수 있습니까? 또는 JSON을 사용한 바닐라 아약스 POST의 완전한 작동 예에 대한 링크가 있다면 감사합니다
Robert

1

나는 며칠 동안 여러 배열의 id를 전달하고 blob을 반환하는 것처럼 나에게 도움이되는 것을 찾기 위해 고심했습니다. .NET CORE를 사용하는 경우 2.1을 사용하는 경우 [FromBody]를 사용해야하며 데이터를 보유하기 위해 뷰 모델을 작성해야 할 때만 사용할 수 있습니다.

아래와 같이 내용을 정리하고

var params = {
            "IDs": IDs,
            "ID2s": IDs2,
            "id": 1
        };

내 경우에는 이미 배열을 json하고 함수에 결과를 전달했습니다.

var IDs = JsonConvert.SerializeObject(Model.Select(s => s.ID).ToArray());

그런 다음 XMLHttpRequest POST를 호출하고 객체를 문자열 화하십시오.

var ajax = new XMLHttpRequest();
ajax.open("POST", '@Url.Action("MyAction", "MyController")', true);
ajax.responseType = "blob";
ajax.setRequestHeader("Content-Type", "application/json;charset=UTF-8");           
ajax.onreadystatechange = function () {
    if (this.readyState == 4) {
       var blob = new Blob([this.response], { type: "application/octet-stream" });
       saveAs(blob, "filename.zip");
    }
};

ajax.send(JSON.stringify(params));

그런 다음이 모델을

public class MyModel
{
    public int[] IDs { get; set; }
    public int[] ID2s { get; set; }
    public int id { get; set; }
}

그런 다음 액션을 전달하십시오.

public async Task<IActionResult> MyAction([FromBody] MyModel model)

파일을 반환하는 경우이 부가 기능을 사용하십시오

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>

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