Question

我有一个json文件，当点击一个按钮时，一些数据会附加到html文档的div中：

HTML：

<div class="json"></div>
<button id="one"></button>

这里是javascript：

function one(){
    $("#one").click(function(){
        $.getJSON('one.json',function(data){
            alert("success");       
        })
        .done(function() { alert('getJSON request succeeded!'); })
        .fail(function() { alert('getJSON request failed! '); })
        .always(function() { alert('getJSON request ended!'); });
    });
}

$(document).ready(function() {
   one();
});

one.json文件位于js文件的同一目录中。当我点击按钮时，警报就是 “getJSON请求失败”......错误在哪里？

Answer 1

查看以下代码是否有效： -

 $.getJSON('/YourDirectory/one.json',function(data){
            alert("success");       
        })

Answer 2

$.getJSON()将url作为获取JSON的位置的参数，而不是文件路径。

$.getJSON('/one.json', function (data) { ... });

或

$.getJSON('http://localhost:1234/one.json', function (data) { ... });

获取one.json文件的网址并粘贴到浏览器地址栏中。如果浏览器返回JSON内容，那么您知道可以在$ .getJSON（）`调用中使用该URL。

Answer 3

如果你的html是从网址开放的

localhost:80/project/test.html

然后json路径将是

localhost:80/project/one.json

因此请确保html和json在同一个文件夹中。

Answer 4

好吧，要么删除getJSON方法中的成功回调，要么使用.done .fail ..或仅使用成功回调

 function one(){
   $("#one").click(function(){
    $.getJSON('path/to/one.json')
    .done(function() { alert('getJSON request succeeded!'); })
    .fail(function() { alert('getJSON request failed! '); })
    .always(function() { alert('getJSON request ended!'); });
   });
}

$(document).ready(function() {
  one();
 });

Answer 5

您的Ajax请求将在您当前页面的网址中查找，因此如果您在：

mysite.com/index.html，它会查看mysite.com/one.json

和

mysite.com/category/index.html，它会继续 mysite.com/category/one.json

如果您有现代浏览器，则可以打开开发人员控制台以查看确切的请求是什么。

getJSON请求失败

5 个答案: