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

时间:2015-07-21 09:40:08

标签: jquery arrays ajax

我通过ajax将多维数组从php脚本返回到html页面。现在这些值在array中正确返回。我在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"]
  }
]

我想将类型,制造商和费率显示为单独的表格。 像,

  

类型:4轮车,飞行汽车 [在选择框中]

     

制造商:本田,奥迪 [在选择框中]

     

费率:价值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;

          });

        });

2 个答案:

答案 0 :(得分:0)

更新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"]
  }
]

评分键缺少结束方括号[,应为:

[
  {
    "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这里有数据数组,将其更改为其他键以迭代其他数组元素

答案 1 :(得分:0)

请参阅以下链接

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

`