使用 Ajax 从外部文件调用 JSON 数据答案

【问题标题】：Call JSON data from External file using Ajax使用 Ajax 从外部文件调用 JSON 数据
【发布时间】：2016-08-01 14:30:44
【问题描述】：

我正在调用具有一些示例 JSON 代码的外部 JS 文件，当我尝试将示例 json 代码放入文件中时，它会在“：”处引发错误，但是当我使用在线工具验证时，它会显示为有效的 json。这段代码出了什么问题？

这是我的代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>


  <script>
$(document).ready(function() {

    $('#click').click(function() {
        $.ajax({
            url: "json.js",
            method: "GET",
            dataType: 'application/json',
            contentType: "application/json",
             success: function(result){
                  console.log(result);
             },
             error:function() {
                 alert("Error")                  
             }
        });
    });
});
</script>

我的外部 json.js

{
"data": [{      ------> throwing error at ":" as Syntax error on token ":", ; expected
    "Service": "INSTACC",

    "Create Date": "30-Jul-2016"


}, {
    "Service": "INSTACC",

    "Create Date": "30-Jul-2016"


}]

}

【问题讨论】：

你知道json文件的扩展名为.json吗？
大声笑你甚至引用页面上的js文件，如果你引用页面上的文件为什么要使用ajax？
参考这个网址stackoverflow.com/questions/6699091/json-file-extension它会建议你

标签： javascript jquery json ajax

【解决方案1】：

将文件类型更改为 json 并将数据类型更改为“json”

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script>
$(document).ready(function() {

    $('#click').click(function() {
        $.ajax({
            url: "json.json",
            method: "GET",
            dataType: 'json',
             success: function(result){
                  console.log(result);
             },
             error:function() {
                 alert("Error")                  
             }
        });
    });
});
</script>

【讨论】：

对不起，我放错了.js ..仍然会出现错误回调。
xhr 请求正文是什么样子的？
我不需要任何请求正文。我只需要调用该外部 json 文件并加载数据成功回调
你是怎么做到的，你不是在请求文件正文吗？
我们已经把它作为 url 放在 ajax 调用中了吗？它是一个普通的 GET 调用，用于获取 json 数据作为响应。

【解决方案2】：

“application/json”不是 dataType 属性的有效值。将其更改为 dataType: 'json',

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyDemo</title>
</head>
<body>
<button id="click">Click Me</button>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {

        $('#click').click(function() {
            $.ajax({
                url: "json.js",
                method: "GET",
                dataType: 'json',
                contentType: "application/json",
                success: function(result){
                    console.log(result);
                },
                error:function(req, status, err) {
                    console.log(req);
                    console.log(status);
                    console.log(err);
                }
            });
        });
    });
</script>
</body>
</html>

【讨论】：

@Arun Kumar 为什么他需要 contentType？
@madalin ivascu contentType 是您发送的数据类型。 dataType 是您期望从服务器返回的内容：json、html、文本等。对不起，由于它是 get 请求，没有从客户端发送到服务器的数据，它可能会被删除。