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.

javascript ajax json header request Adam
źródło

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"}));
Nathan Romano
źródło
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']
shantanu chandra
źródło
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>
Dave
źródło
0

Dodanie Json.stringfyjson, które rozwiązało problem

user3310115
źródło