AJAX 显示作为 HTML 而不是 JSON 传递的数据答案

【问题标题】：AJAX shows data passed as HTML but not JSONAJAX 显示作为 HTML 而不是 JSON 传递的数据
【发布时间】：2015-10-27 19:48:40
【问题描述】：

当点击主猫中的一个项目时，与该特定 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 请求中的数据类型更改为 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);
  ?>

【问题讨论】：

标签： jquery ajax json

【解决方案1】：

改变

dataType: "html",

到

dataType: "json",

在您的 $.ajax 参数中。

这个dataType是服务器返回数据的数据格式。

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

【讨论】：

我说过，当我将 dataType 更改为 JSON 时，它什么也不显示！

【解决方案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);
            }
      }
    });
});

【讨论】：