JavaScript: wysłać obiekt JSON za pomocą Ajax?


151

czy to możliwe?

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

Może z: nagłówkiem z content type: application/json?:

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

W przeciwnym razie mogę użyć:

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

a następnie JSON.stringifyobiekt JSON i wyślij go w parametrze, ale fajnie byłoby wysłać go w ten sposób, jeśli to możliwe.

Odpowiedzi:


330

Dzięki jQuery:

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

Bez 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
ale człowieku, mogę użyć typu zawartości: application/x-www-form-urlencodedtakże jeśli używam stringify, to jaki jest sens tego używać application/json? :)
— Adam

4
@CIRK: Co to ma znaczenie? Ustawienie typu zawartości jest całkowicie dowolne, chyba że serwer traktuje specjalnie jedną lub drugą. To tylko dane przepływające tam iz powrotem pod koniec dnia.
— mellamokb

17
cóż, jeśli treść posta ma być w formacie JSON, np. ({imię: "John", godzina: "2pm"}) użyj typu treści application / json, jeśli treść posta ma postać danych w kodzie urlencoded (imię = Jan i godzina = 14:00) użyj application / x-www-form-urlencoded
— Nathan Romano

1
gdzie mam umieścić adres URL?
— Aaron Liu,

6
@ShuruiLiu adres URL zostaje zastąpiony "/json-handler"jako drugi parametr open()metody
— Alexandr Nil

36

Jeśli nie używasz jQuery, upewnij się, że:

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

A dla strony otrzymującej php:

 $_POST['json_name'] 

Nie możesz go użyć bezpośrednio?
— rohitsakala

8
Nie sądzę, żeby to odpowiadało na zadane pytanie. Wydaje mi się, że programista chce wysłać blob JSON do PHP jako Content-Type: application / json, a nie opakowany w opakowanie z kodem urlencod.
— Fordi,

1
To nie jest tak naprawdę przesyłanie JSON, to przesyłanie danych formularza. Możesz również wysłać bezpośrednio JSON, w takim przypadku nie możesz go odczytać za pomocą $ _POST, ale zamiast tego odczytać go za pomocą json_decode (file_get_contents ('php: // input'));
— David

Drodzy przyjaciele, czy możecie udostępnić ten POST Ajax z całym potrzebnym kodem do użycia na stronie? Lub też dziękuję, jeśli masz miły link do pełnego działającego przykładu waniliowego ajax POST z JSON
— Robert

1

Przez kilka dni walczyłem, aby znaleźć cokolwiek, co by dla mnie zadziałało, na przykład przekazywanie wielu tablic identyfikatorów i zwracanie kropli. Okazuje się, że jeśli używam .NET CORE używam 2.1, musisz użyć [FromBody] i tak samo, jak możesz użyć tylko wtedy, gdy musisz utworzyć viewmodel do przechowywania danych.

Podsumuj zawartość, jak poniżej,

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

W moim przypadku miałem już json'd the Arrays i przekazałem wynik do funkcji

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

Następnie wywołaj XMLHttpRequest POST i zdefiniuj obiekt

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

Więc miej taki model

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

Następnie przejdź do działania jak

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

Użyj tego dodatku, jeśli zwracasz plik

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.