Javascript: ¿Enviar objeto JSON con Ajax?

151

es posible?

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

Quizás con: un encabezado con content type: application/json?:

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

De lo contrario, puedo usar:

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

y luego JSON.stringifyel objeto JSON y enviarlo en un parámetro, pero sería genial enviarlo de esta manera si es posible.

javascript ajax json header request Adán
fuente

Respuestas:

330

Con jQuery:

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

Sin 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
fuente
2
pero hombre, también puedo usar content-type: application/x-www-form-urlencodedsi uso stringify, ¿cuál es el punto a usar application/json? :)
Adam
44
@CIRK: ¿Qué importa? La configuración de tipo de contenido es completamente arbitraria a menos que el servidor trate a uno u otro especialmente. Son solo datos que fluyen de un lado a otro al final del día.
mellamokb
17
bueno, si se espera que el cuerpo de su publicación sea JSON, por ejemplo ({nombre: "John", hora: "2pm"}) use el tipo de contenido application / json si su cuerpo de la publicación es datos codificados por urlen (name = John & time = 2pm) use la aplicación x-www-form-urlencoded
Nathan Romano
1
¿Dónde debo poner la URL?
Aaron Liu
66
@ShuruiLiu una URL entra en lugar de "/json-handler"un segundo parámetro del open()método
Alexandr Nil
36

Si no está utilizando jQuery, asegúrese de: 

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

Y para el extremo receptor de php:

 $_POST['json_name']
Shantanu Chandra
fuente
¿No puedes usarlo directamente?
rohitsakala
8
No creo que esto responda la pregunta formulada. Creo que el desarrollador quiere enviar un blob de JSON a PHP como Content-Type: application / json, no envuelto en un contenedor urlencoded.
Fordi
1
Esto realmente no está enviando JSON, está enviando datos de formulario. También puede enviar JSON directamente, en cuyo caso no puede leerlo con $ _POST, sino leerlo con json_decode (file_get_contents ('php: // input'));
David
Queridos amigos, ¿pueden compartir este POST ajax con todo el código necesario para usar en la página? O también gracias si tiene un enlace amable a algún ejemplo de trabajo completo de POST de vainilla ajax con JSON
Robert
1

Luché durante un par de días para encontrar algo que me funcionara, ya que pasaba múltiples matrices de identificadores y devolvía un blob. Resulta que si estoy usando .NET CORE estoy usando 2.1, necesitas usar [FromBody] y como solo puedes usar una vez que necesites crear un modelo de vista para guardar los datos.

Termine el contenido como a continuación,

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

En mi caso, ya había json'd las matrices y pasé el resultado a la función

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

Luego llame a XMLHttpRequest POST y stringifique el objeto

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

Entonces ten un modelo como este 

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

Luego pasa en acción como 

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

Use este complemento si devuelve un archivo 

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

Agregando Json.stringfyalrededor del json que solucionó el problema

usuario3310115
fuente