javascript - ajax返回当前页面的html代码而不是json

标签 javascript jquery json

我正在 JQuery 中使用 $.ajax 函数从文件中获取 JSON。 HTML、JavaScript 和 json 文件位于同一目录中。问题是，当我打印从成功回调函数返回的数据时，它会打印 HTML 页面的 HTML 标记而不是 JSON。

这是我的 data.json 文件内容:

{
  "products":[
    {
      "skuNum":"SKU# 105423-2",
      "brand":"nike running shoes",
      "section":"men > shoe > Running shoes",
      "img":"392232_004_ss_01.jpg",
      "price":500
    },
    {
      "skuNum":"SKU# 105423-2",
      "brand":"south face jacket",
      "section":"women > Apparel > jackets",
      "img":"jacket.jpeg",
      "price":800
    }
  ]
}

我的 JQuery:

$(function () {
      $.ajax({
          type: 'GET',
          URL:'data.json',
          success:function (data) {
              console.log(data);
          },
          error:function (error) {
              console.log('error')
          }
      });
});

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="ajax.css">
    <script src="jquery-3.3.1.js"></script>
</head>
<body>
<nav>
    <a href="#">Home</a>
    <a href="#" id="products">Products</a>
    <a href="#">Help</a>
</nav>
<div class="container">

</div>
<script src="ajax.js"></script>
</body>
</html>

这是输出的片段: