Question

当点击主猫中的项目时，与该特定ID相关的所有子项都显示在showSubCat div中。通过AJAX从searchItems.php获取数据，只有在dataType设置为html / text时才能正常工作。结果如下所示：

[{"name":"Martial Arts","id":"4"},{"name":"Fitness","id":"5"},{"name":"Dance","id":"6"},{"name":"Lifestyle","id":"7"}]

但是我期待JSON数据类型。但是当我将AJAX请求中的dataType更改为json时，没有显示任何内容。我只想了解将数据集定义为JSON的期望是什么？请在searchItems.php中检查我的php脚本并让我知道，我应该这样做，以便它可以接受它作为JSON。

原因是，我希望能够通过在AJAX成功函数中放置这样的数据来仅检索我想要的数据：

for (i = 0; i < data.length; i++) {
             console.log(data[i].name);
        }

提前谢谢。

HTML

<!--Main Cat ends-->
    <div class="main_cat" id="<?php echo $value["id"];?>">
        <?php
        echo $value["name"];
        ?>
    </div>
  <!--Main Cat ends-->



<!--sub Cat starts-->
  <div id="showSubCat">
  <h2>Sub categories</h2>
  </div>
  <!--sub Cat ends-->

脚本

$(".main_cat").on("click",function()
{
    var id = this.id;
    $('#showSubCat').empty();
    $.ajax({
      dataType: "json",
      url: 'searchItems.php?id='+id,
      success: function(data){
           $('#showSubCat').append(data);

      }
    });
});

searchItems.php

 <?php include($_SERVER['DOCUMENT_ROOT'].'config.php');?>
 <?php include($_SERVER['DOCUMENT_ROOT'].'class.search_functions.php');?>
 <?php
  $id = $_GET["id"];
  $subCat = new searchItems();
  $showSubCat = $subCat->showSubCat($id);
  $json=array();
  foreach($showSubCat as $key=>$value)
  {
     array_push($json,array("name"=>$value["name"],"id"=>$value["id"]));
  }

   echo json_encode($json);
  ?>

Answer 1

更改

dataType: "html",

到

dataType: "json",

在您的$.ajax参数中。

此dataType是从服务器返回的数据的数据格式。

您期望从服务器返回的数据类型。如果没有指定，jQuery将尝试根据响应的MIME类型推断它（XML MIME类型将产生XML，在1.4 JSON中将产生一个JavaScript对象，在1.4脚本中将执行脚本，其他任何东西将是以字符串形式返回）。可用的类型（以及作为成功回调的第一个参数传递的结果）是：

Answer 2

我编辑过的脚本按预期工作：

$(".main_cat").on("click",function()
{
    var id = this.id;
    $('#showSubCat').empty();
    $.ajax({
      dataType: "json",
      url: 'searchItems.php?id='+id,
      success: function(data){
         for (i = 0; i < data.length; i++) {
                 console.log(data[i].name);
                  $('#showSubCat').append(data[i].name);
            }
      }
    });
});

AJAX显示以HTML而非JSON传递的数据

2 个答案: