将 JSON 与 Jquery Ajax 结合使用

发布于 2024-11-06 08:00:56 字数 1185 浏览 0 评论 0原文

今天早上我开始练习 Jquery AJAX JSON。我了解 Jquery,但了解 JSON & Ajax 对我来说是个新鲜事物。

我开发了一小段代码来使用 ajax 读取 JSON 文件并通过附加列表来显示数据值。

在正文部分使用以下 div。

<div id="tabPanelWrapper"></div>

Javascript:

$(document).ready(function() {

    // Calling Ajax Function
    loadContent();                          

});

function loadContent() {
    $.ajax({
       type: "GET",
       url: "data.js",
       dataType: "json",
       cache: false,
       contentType: "application/json",
       success: function(data) {
        alert("Success");
        $.each(data.dashboard, function(i,post){
            $('#tabPanelWrapper').append('<ul><li>' + data.id + '</li><li>' + data.name +'</li></ul>');
        });
      },
        error: function(xhr, status, error) {
            alert(xhr.status);
        }
    });
}

JSON 文件:

{
    dashboard: [
    {
        "id": "tcm:20-1869",
        "name": "FEATURED ARTICLE"
    },
    {
        "id": "tcm:20-1869",
        "name": "FEATURED ARTICLE"
    }
]
}

页面抛出 404 错误。请帮我处理这段代码。

预先感谢|洛克什·亚达夫

I started my hands on training on Jquery AJAX JSON this morning. I have knowledge of Jquery but JSON & Ajax is something new to me.

I have developed a small snippet of code to read JSON file with ajax and show the data values by appending the list.

using following div in body section.

<div id="tabPanelWrapper"></div>

Javascript:

$(document).ready(function() {

    // Calling Ajax Function
    loadContent();                          

});

function loadContent() {
    $.ajax({
       type: "GET",
       url: "data.js",
       dataType: "json",
       cache: false,
       contentType: "application/json",
       success: function(data) {
        alert("Success");
        $.each(data.dashboard, function(i,post){
            $('#tabPanelWrapper').append('<ul><li>' + data.id + '</li><li>' + data.name +'</li></ul>');
        });
      },
        error: function(xhr, status, error) {
            alert(xhr.status);
        }
    });
}

JSON File:

{
    dashboard: [
    {
        "id": "tcm:20-1869",
        "name": "FEATURED ARTICLE"
    },
    {
        "id": "tcm:20-1869",
        "name": "FEATURED ARTICLE"
    }
]
}

Page is throwing 404 error. Please help me with this code.

Thanks in advance | Lokesh Yadav

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

你的心境我的脸 2024-11-13 08:00:56

404 错误是页面未找到错误。我会尝试浏览到您尝试访问的 data.js 文件,并且可能尝试在 .ajax 调用中写出该文件的完整 url。

 http://myhost.com/script/data.js

如果那是您的脚本的位置。

更新
您的错误是无效的 Json。如果您检查错误函数中的错误参数,您就会看到这一点。

尝试在仪表板周围添加引号,您应该更进一步!

而且您还必须更改您的成功方法:

 $.each(data.dashboard, function(i,post){
            $('#tabPanelWrapper').append('<ul><li>' + post.id + '</li><li>' + post.name +'</li></ul>');
        });

请注意,我正在查看 post.idpost.name 因为这是$.each 枚举。 data.id 会在 Json 中的仪表板旁边查找 id 属性,但该属性不存在。

a 404 error is a Page Not found error. I'd try to browse to the data.js file you're trying to access, and maybe try to write out the full url to the file in your .ajax-call.

I.e.

 http://myhost.com/script/data.js

if that's the location of your script.

UPDATE
Your error is invalid Json. If you check the error argument in your Error-function, you'd see that.

Try adding quotes around dashboard, and you should be one step further!

And you'll also have to change in your success-method:

 $.each(data.dashboard, function(i,post){
            $('#tabPanelWrapper').append('<ul><li>' + post.id + '</li><li>' + post.name +'</li></ul>');
        });

note that I'm looking at post.id and post.name since that is the current item in the $.each enumeration. data.id would look for an id-property next to dashboard in your Json, but that doesn't exist.

始终不够 2024-11-13 08:00:56

更改

$.each(data.dashboard, function(i,post){
        $('#tabPanelWrapper').append('<ul><li>' + data.id + '</li><li>' + data.name +'</li></ul>');
});

 $.each(data.dashboard, function(i,post){
        $('#tabPanelWrapper').append('<ul><li>' + post.id + '</li><li>' + post.name +'</li></ul>');
 });

404 错误肯定不是由此引起的。

change

$.each(data.dashboard, function(i,post){
        $('#tabPanelWrapper').append('<ul><li>' + data.id + '</li><li>' + data.name +'</li></ul>');
});

to

 $.each(data.dashboard, function(i,post){
        $('#tabPanelWrapper').append('<ul><li>' + post.id + '</li><li>' + post.name +'</li></ul>');
 });

defnitely the 404 error is not due to this.

小兔几 2024-11-13 08:00:56

检查 URL 属性。
404 错误不是 json 错误。

Check the URL property.
An 404 error is not a json error.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文