Javascript: ส่ง JSON Object ด้วย Ajax?


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.stringifyวัตถุ JSON และส่งในพารามิเตอร์ แต่มันจะเจ๋งที่จะส่งด้วยวิธีนี้ถ้าเป็นไปได้

คำตอบ:


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-urlencodedเช่นกันถ้าฉันใช้ stringify ดังนั้นจุดที่จะใช้application/jsonคืออะไร? :)
อดัม

4
@CIRK: มันคืออะไร การตั้งค่าประเภทเนื้อหานั้นจะไม่มีการกำหนดโดยสมบูรณ์เว้นแต่เซิร์ฟเวอร์จะปฏิบัติต่อสิ่งใดสิ่งหนึ่งเป็นพิเศษ เป็นเพียงข้อมูลที่ไหลไปมาในตอนท้ายของวัน
mellamokb

17
ดีถ้าเนื้อหาโพสต์ของคุณคาดว่าจะเป็น JSON เช่น ({ชื่อ: "John", เวลา: "2pm"}) ใช้แอปพลิเคชันประเภทเนื้อหา / json หากโพสต์เนื้อหาของคุณเป็นรูปแบบข้อมูล urlencoded (ชื่อ = John & time = 2pm) x-www-form-urlencoded
Nathan Romano

1
ฉันควรใส่ URL ที่ไหน?
Aaron Liu

6
@ShuruiLiu URL ไปในสถานที่ของ"/json-handler"เป็นพระรามที่ 2 ของopen()วิธีการ
Alexandr Nil

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
ฉันไม่คิดว่านี่จะตอบคำถามที่ถาม ฉันเชื่อว่า dev ต้องการส่ง blob ของ JSON ไปยัง PHP ในรูปแบบของ Content-Type: application / json ไม่ได้ห่อหุ้มด้วย urlencoded wrapper
Fordi

1
นี่ไม่ได้เป็นการส่ง JSON ผ่านมันเป็นการส่ง formdata ผ่าน คุณยังสามารถส่ง JSON ได้โดยตรงซึ่งในกรณีนี้คุณไม่สามารถอ่านด้วย $ _POST แต่อ่านด้วย json_decode (file_get_contents ('php: // input'));
เดวิด

เพื่อน ๆ ที่รักคุณสามารถแชร์ Ajax POST นี้กับรหัสที่จำเป็นทั้งหมดเพื่อใช้ในหน้าได้หรือไม่ หรือขอบคุณเช่นกันหากคุณมีลิงค์เชื่อมโยงไปยังตัวอย่างการทำงานที่สมบูรณ์ของ vanilla ajax POST กับ JSON
Robert

1

ฉันพยายามสองสามวันเพื่อค้นหาสิ่งที่จะทำงานให้ฉันตามที่ผ่านรหัสอาร์เรย์หลายและกลับหยด ปรากฎว่าใช้. NET CORE ฉันใช้ 2.1 คุณต้องใช้ [FromBody] และสามารถใช้ได้เฉพาะเมื่อคุณต้องการสร้าง viewmodel เพื่อเก็บข้อมูล

ปิดเนื้อหาเช่นด้านล่าง

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

ในกรณีของฉันฉันมีอาร์เรย์แล้วส่งผ่านผลลัพธ์ไปยังฟังก์ชัน

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; }
}

จากนั้นส่งผ่านใน Action like

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

ใช้ Add-on นี้หากคุณส่งคืนไฟล์

<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.