如何将多维数组返回到表中并在jquery中显示？

Question

我通过 ajax 将多维数组从 php 脚本返回到 html 页面。现在数组中的值已正确返回。我在 console.log 上检查了它。

但是如何在 jquery 中将每个数组更改为单独的数组？

这就是我传递表单 php 脚本的方式

$json=array();
array_push($json,array("type"=>$carType,"maker"=>$carMaker,"rate"=>$selectRate));
echo json_encode($json);

这就是它在 ajax 中的处理方式。

$("#submit").on("click",function()
    {

          $("#set_setting").submit(function(){            

            data = $(this).serialize()
            $.ajax({
              type: "POST",
              dataType: "html",
              url: "submit_setting.php", //Relative or absolute path to response.php file
              data: data,
              success: function(data) {
              //hide the form
              $("#set_setting").slideUp("slow");
              //show the result

                  console.log(data);

             $(".the-return").html(data);//how to show in table here?

              }

            });
            return false;

          });

        });

console.log(data) 输出如下：

[
  {
    "type":["4 wheeler","flying ycar"],
    "maker":["Honda","Audi"],
    "rate":[["2","20"],["2","40"],["2","50"],["0","80"],["0","90"],["0","70"]
  }
]

我想将类型、制造商和评分显示为单个表格。 喜欢，

类型：四轮车，飞行汽车[在选择框中]

制造商：本田、奥迪[在选择框中]

费率：值 2- 20,40,50 [表中]
值 0- 80,90,70 [在表中]

我知道这有点复杂。至少如果可以在不同的表中显示每个数组就足够了，但在 Jquery 中。

编辑后

$("#submit").on("click",function()
    {

          $("#set_setting").submit(function(){            

            data = $(this).serialize()
            $.ajax({
              type: "POST",
              dataType: "json",
              url: "submit_setting.php", //Relative or absolute path to response.php file
              data: data,
              success: function(data) {
              //hide the form
              $("#set_setting").slideUp("slow");
              //show the result
              var parse_JSON = function (data) {
                  try {
                       var obj = JSON && JSON.parse(data) || $.parseJSON(data);
                       return obj;

                  } catch (e) {
                       // not json
                       console.log("Can not parse");
                       return false;
                  }
              };
                $.each( obj.type, function( index, value ){
                 console.log(value);
                });
             //$(".the-return").html(me);

              }

            });
            return false;

          });

        });

Answer 1

参考以下链接，

http://jsfiddle.net/cjc2o55e/工作代码`

'var json_ec = $.parseJSON('{"type":["4 wheeler","flying ycar"],"maker":["Honda","Audi"],"rate":[["2","20"],["2","40"],["2","50"],["0","80"],["0","90"],["0","70"]]}');
var type = '';
var maker = '';
var rate = '';
$.each(json_ec,function(k,v)
       {
           if(k == 'type')
           {
               type = v;
           }
           else if(k == 'maker')
           {
               maker= v;
           }
           else if(k == 'rate')
           {
               rate = v;
           }               
       });
console.log(type);
console.log(maker);
console.log(rate);'

`

Answer 2

更新 v2
在您的 PHP 脚本顶部添加此标头：

header('Content-type: application/json');

更新：
您返回的 JSON 无效：

[
  {
    "type":["4 wheeler","flying ycar"],
    "maker":["Honda","Audi"],
    "rate":[["2","20"],["2","40"],["2","50"],["0","80"],["0","90"],["0","70"]
  }
]

rate 键缺少右方括号[，应该是：

[
  {
    "type":["4 wheeler","flying ycar"],
    "maker":["Honda","Audi"],
    "rate":[["2","20"],["2","40"],["2","50"],["0","80"],["0","90"],["0","70"]]
  }
]

正如您所期望的那样，返回 JSON，因此，在您的 AJAX 请求中将 dataType 更改为 JSON ：

$.ajax({
    .....
    dataType: "json",
    .....

    success: function(data) {
       //hide the form
       $("#set_setting").slideUp("slow");

       $.each( data.type, function( index, value ){
             console.log(value);
       });
   }
});

您可以像这样在 AJAX 回调中遍历每个元素：

$.each( data.type, function( index, value ){
   console.log(value);
});

注意type这里有数据数组的键，将其更改为其他键以迭代其他数组元素