Ajax-为什么在$ .post（）中将JSON.parse（data）与dataType一起使用

Question

我使用ajax动态填充数据表。

代码如下：

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

但是有些事情我不理解，为什么我必须使用行JSON.parse (data)，这不是dataType的工作，还是我的代码有问题？

如何改善脚本？

编辑：

Console.log（data）-在JSON.parse（data）之前：

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

在JSON.parse（data）之后：

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

如果我不放JSON.parse(data) 他没有带我super元素，而是带我[

Answer 1

在您的示例中，当您依靠done参数（我在本地复制了问题）时，发现传递给dataType回调时未解析数据时，我感到很震惊。这是因为jQuery的$.post要求您为success参数传递一个参数，如果您要包含一个dataType参数的话；参见Aditya Sharma's answer上docs的引用。

尽管如此，您仍然不应依赖dataType参数；相反，您的PHP应该返回正确的Content-Type标头：

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

如果这样做，您的$.post呼叫就可以正常工作（没有 JSON.parse呼叫）。

如果由于某些原因您无法执行此操作，请使用成功回调代替done（或将null作为success参数，并继续使用.done） ; jQuery将通过"json"参数为您解析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");

...然后再次不需要进行JSON.parse调用。

但同样，最好是PHP正确识别响应的类型。

Answer 2

dataType的顺序错误。

  

jQuery.post（url [，data] [，success] [，dataType]）

根据官方doc。

  

如果请求成功执行的回调函数。需要   如果提供了dataType，但在这种情况下可以为null。

尝试一下

$.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");

或尝试将回调设置为undefined

$.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();
    } 
  });

选中此fiddle

Answer 3

如果请求$.post，则首先需要解析json数组，然后获取数组值。否则，您可以使用ajax调用更好，并且您不需要直接要求Json.parse就可以获取数组值。

示例：

 $.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);
        },

=>检查并尝试这个。