Javascript: JSON-Objekt mit Ajax senden?

151

Ist das möglich?

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

Vielleicht mit: einem Header mit content type: application/json?:

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

Ansonsten kann ich verwenden:

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

und dann JSON.stringifydas JSON-Objekt und senden Sie es in einem Parameter, aber es wäre cool, es auf diese Weise zu senden, wenn es möglich ist.

— Adam
quelle

330

Mit jQuery:

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

Ohne 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
quelle

2

Aber Mann, ich kann den Inhaltstyp verwenden. application/x-www-form-urlencodedAuch wenn ich stringify verwende, was ist dann der Sinn zu verwenden application/json? :)

— Adam

4

@CIRK: Was ist los? Die Einstellung des Inhaltstyps ist völlig willkürlich, es sei denn, der Server behandelt das eine oder andere speziell. Es sind nur Daten, die am Ende des Tages hin und her fließen.

— Mellamokb

17

Nun, wenn erwartet wird, dass Ihr Post-Body JSON ist, z. B. ({Name: "John", Zeit: "2pm"}), verwenden Sie den Inhaltstyp application / json, wenn Ihr Post-Body aus urlencodierten Daten besteht (Name = John & time = 2pm). Verwenden Sie application / x-www-form-urlencoded

— Nathan Romano

1

Wo soll ich die URL einfügen?

— Aaron Liu

6

@ ShuruiLiu eine URL anstelle von "/json-handler"als 2. Parameter der open()Methode

— Alexandr Nil

36

Wenn Sie jQuery nicht verwenden, stellen Sie bitte Folgendes sicher:

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

Und für das PHP-Empfangsende:

 $_POST['json_name']

— Shantanu Chandra
quelle

Kannst du es nicht direkt benutzen?

— Rohitsakala

8

Ich glaube nicht, dass dies die gestellte Frage beantwortet. Ich glaube, der Entwickler möchte einen JSON-Blob als Inhaltstyp an PHP senden: application / json, nicht in einen urlencodierten Wrapper eingeschlossen.

— Fordi

1

Dies sendet nicht wirklich JSON, sondern Formulardaten. Sie können JSON auch direkt senden. In diesem Fall können Sie es nicht mit $ _POST lesen, sondern mit json_decode (file_get_contents ('php: // input')).

— David

Liebe Freunde, können Sie diesen POST-Ajax mit dem gesamten erforderlichen Code teilen, der auf der Seite verwendet werden soll? Oder danke auch, wenn Sie einen freundlichen Link zu einem voll funktionsfähigen Beispiel von Vanilla Ajax POST mit JSON

— Robert

1

Ich kämpfte ein paar Tage lang darum, etwas zu finden, das für mich funktionieren würde, da ich mehrere Arrays von IDs passierte und einen Blob zurückgab. Wenn Sie .NET CORE verwenden, stellt sich heraus, dass Sie 2.1 verwenden. Sie müssen [FromBody] verwenden und können es nur verwenden, wenn Sie ein Ansichtsmodell zum Speichern der Daten erstellen müssen.

Schließen Sie den Inhalt wie unten ab.

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

In meinem Fall hatte ich die Arrays bereits json'd und das Ergebnis an die Funktion übergeben

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

Rufen Sie dann den XMLHttpRequest-POST auf und stringifizieren Sie das Objekt

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

Dann haben Sie ein Modell wie dieses

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

Dann pass in Aktion wie

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

Verwenden Sie dieses Add-On, wenn Sie eine Datei zurückgeben

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

— Dave
quelle

0

Hinzufügen Json.stringfyum den json, der das Problem behoben hat

— user3310115
quelle