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

时间:2018-09-05 15:52:42

标签: 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>

这是输出的摘要:

  

output snippet

1 个答案:

答案 0 :(得分:3)

JavaScript区分大小写。 URL的正确属性是url选项对象中的$.ajax

当您提供拼写错误的属性时,它将被忽略,并且正确的属性将返回未定义。

在这种情况下,由于它是URL,因为选项中没有url可用,所以请求将到达当前页面

更改:

URL:'data.json',

收件人

url:'data.json',