Yo uso ajax para llenar una tabla de tablas de datos dinámicamente.

Aquí está el código:

Javascript:

  $.post("/import_data.php", {add: new_row}, "json").done(function(data){
    data = JSON.parse(data);

    if (data[0] === 'example_1') {
      .....
      $("#error_1").modal("show");
    }
    else if (data[0] === 'example_2') {
      .....
      $("#error_2").modal("show");
    }
    else {
      table.row.add(data).order([0, 'desc']).draw();
    } 
  });

PHP (import_data.php):

 ...    
 $arr = array('info1', 'info2', 'info3', 'info4');
 echo json_encode($arr);

Pero hay algo que no entiendo, ¿por qué tengo que usar la línea JSON.parse (data), no es el trabajo del tipo de datos o hay un problema en mi código?

¿Cómo puedo mejorar mi script?

EDITAR:

Console.log (datos): antes de JSON.parse (datos):

["super","1","220","example"]

Después de JSON.parse (datos):

(4) ["super", "1", "220", "example"]
0: "super"
1: "1"
2: "220"
3: "example"
length: 4
__proto__: Array(0)

Si no pongo JSON.parse(data) En lugar de llevarme el elemento super, él me lleva [

2
Rocstar 13 sep. 2018 a las 12:04

3 respuestas

La mejor respuesta

Me sorprende ver que los datos no se analizan cuando se pasan a la devolución de llamada done cuando confía en el parámetro dataType (he replicado su problema localmente) en su ejemplo. Se debe a que $.post de jQuery requiere que pase un argumento para el parámetro success si va a incluir un parámetro dataType; consulte la respuesta de Aditya Sharma para obtener una cita de documentos sobre eso.

Sin embargo, no debe confiar en el parámetro dataType; en cambio, su PHP debería devolver el encabezado Content-Type correcto:

<!-- language: lang-php -->
<?php
header("Content-Type: application/json");
$arr = array('info1', 'info2', 'info3', 'info4');
echo json_encode($arr);

Si hace eso, su llamada $.post funciona bien ( sin la llamada JSON.parse).

Si por alguna razón no puede hacer eso, use la devolución de llamada exitosa en lugar de done (o pase null como el parámetro success y siga usando .done); jQuery analizará el JSON por usted debido al parámetro "json":

<!-- language: lang-js -->
$.post("temp.php", {add: new_row}, function(data) {
    // ...
}, "json");

// or
$.post("temp.php", {add: new_row}, null, "json").done(function(data) {
    // ...
}, "json");

... y luego, de nuevo, no necesita la llamada JSON.parse.

Pero, de nuevo, es mejor si el PHP identifica correctamente el tipo de respuesta.

3
T.J. Crowder 13 sep. 2018 a las 12:03

La secuencia de dataType es incorrecta.

jQuery.post (url [, datos] [, éxito] [, tipo de datos])

Según la doc oficial.

Una función de devolución de llamada que se ejecuta si la solicitud se realiza correctamente. Se requiere si se proporciona dataType, pero puede ser nulo en ese caso.

Prueba esto

$.post("/import_data.php", {add: new_row}, function(data){

    if (data[0] === 'example_1') {
      .....
      $("#error_1").modal("show");
    }
    else if (data[0] === 'example_2') {
      .....
      $("#error_2").modal("show");
    }
    else {
      table.row.add(data).order([0, 'desc']).draw();
    } 
}, "json");

O intenta configurar la devolución de llamada a indefinida

$.post("/import_data.php", {add: new_row}, null, "json").done(function(data){
    data = JSON.parse(data);

    if (data[0] === 'example_1') {
      .....
      $("#error_1").modal("show");
    }
    else if (data[0] === 'example_2') {
      .....
      $("#error_2").modal("show");
    }
    else {
      table.row.add(data).order([0, 'desc']).draw();
    } 
  });

Compruebe esto fiddle

2
Aditya Sharma 13 sep. 2018 a las 12:23

Si se le solicita con $.post, primero necesita analizar la matriz json y luego obtener un valor de matriz. de lo contrario, puede usar la llamada ajax, es mejor y no necesita requerir Json.parse directamente, puede obtener el valor de la matriz.

Ejemplo:

 $.ajax({
        type: 'POST',
        url: "your url",
        dataType: 'json',
        data: {data: value},
        success: function (data) {
            alert(data[0])
            console.log(data[0]);
            //data = JSON.parse(data);
        },

=> Verifique e intente con esto.

-1
Rushi Shukla 13 sep. 2018 a las 10:00