Javascript: Kirim Objek JSON dengan Ajax?

151

Apakah ini mungkin?

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

Mungkin dengan: header dengan content type: application/json?:

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

Kalau tidak, saya bisa menggunakan:

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

dan kemudian JSON.stringifyobjek JSON dan mengirimkannya dalam parameter, tetapi akan lebih baik untuk mengirimkannya dengan cara ini jika memungkinkan.

— Adam
sumber

330

Dengan jQuery:

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

Tanpa 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"}));

— Nathan Romano
sumber

2

tetapi pria saya bisa menggunakan tipe konten: application/x-www-form-urlencodedjuga jika saya menggunakan stringify, lalu apa gunanya untuk menggunakan application/json? :)

— Adam

4

@CIRK: Ada apa? Pengaturan tipe konten sepenuhnya arbitrer kecuali server memperlakukan yang satu atau yang lain secara khusus. Hanya saja data mengalir bolak-balik di penghujung hari.

— mellamokb

17

baik jika isi postingan Anda diharapkan menjadi JSON misalnya ({name: "John", time: "2pm"}) gunakan aplikasi tipe konten / json jika isi postingan Anda berbentuk data urlencode (nama = John & waktu = 14:00) gunakan aplikasi / x-www-form-urlencoded

— Nathan Romano

1

di mana saya harus meletakkan URL?

— Aaron Liu

6

@ShuruiLiu sebuah URL menggantikan "/json-handler"param 2 dari open()metode

— Alexandr Nil

36

Jika Anda tidak menggunakan jQuery maka pastikan:

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

Dan untuk akhir penerima php:

 $_POST['json_name']

— shantanu chandra
sumber

Tidak bisa menggunakannya secara langsung?

— rohitsakala

8

Saya tidak berpikir ini menjawab pertanyaan yang diajukan. Saya percaya dev ingin mengirim gumpalan JSON ke PHP sebagai Content-Type: application / json, tidak dibungkus dengan pembungkus urlencoded.

— Fordi

1

Ini tidak benar-benar mengirim JSON ke atas, itu mengirim formdata. Anda juga dapat mengirim JSON secara langsung, dalam hal ini Anda tidak dapat membacanya dengan $ _POST, tetapi membacanya dengan json_decode (file_get_contents ('php: // input'));

— David

Teman-teman yang terhormat, dapatkah Anda membagikan POST ajax ini dengan seluruh kode yang diperlukan untuk digunakan pada halaman? Atau terima kasih juga jika Anda memiliki tautan baik ke beberapa contoh kerja penuh vanilla ajax POST dengan JSON

— Robert

1

Saya berjuang selama beberapa hari untuk menemukan sesuatu yang akan bekerja untuk saya seperti melewati beberapa array id dan mengembalikan gumpalan. Ternyata jika menggunakan .NET CORE Saya menggunakan 2.1, Anda harus menggunakan [FromBody] dan karena hanya dapat menggunakan sekali Anda perlu membuat model tampilan untuk menyimpan data.

Bungkus konten seperti di bawah ini,

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

Dalam kasus saya, saya sudah memulai array dan meneruskan hasilnya ke fungsi

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

Kemudian panggil XMLHttpRequest POST dan rapatkan objek

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

Lalu punya model seperti ini

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

Lalu lewat di Action like

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

Gunakan add-on ini jika Anda mengembalikan file

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

— Dave
sumber

0

Menambahkan Json.stringfysekitar json yang memperbaiki masalah

— pengguna3310115
sumber