当我在脚本中使用 AJAX 时,JQuery 停止工作.我做错了什么


JQuery stops working when I use AJAX in my script. What am I doing wrong?

这里是 AJAX 部分

jsonGamesPlayed() {
        $.ajax({
            url: "jsonGamesPlayed.json",
            dataType: "text",
            success: function(data) {
                var json = $.parseJSON(data);
                $('#main_content').append(json.response.games[0].name);
            }
        });
    }

这是调用此函数的位置

$("#nav3").click(function() {
        $('#main_content').fadeTo("slow", 0.0, function() {
            $('#main_content').empty();
            $('#main_content').append('<?php include("/HTML/about3.html")?>');
            jsonGamesPlayed();
        });
        $('#main_content').fadeTo("slow", 1.0);
    });

当我注释掉整个功能时,网站运行良好。但是当我尝试使用它时,我所有的 JQuery/JavaScript 都停止工作了。顺便说一句,我对JavaScript和Jquery相当陌生,所以我一直在研究这个问题。

如果它意味着什么,这里是 .json 文件...

{
"response": {
    "total_count": 3,
    "games": [
        {
            "appid": 8930,
            "name": "Sid Meier's Civilization V",
            "playtime_2weeks": 629,
            "playtime_forever": 7965,
            "img_icon_url": "fbe80c4743e226f0bf65559c91b12953d4446808",
            "img_logo_url": "2203f62bd1bdc75c286c13534e50f22e3bd5bb58"
        },
        {
            "appid": 221380,
            "name": "Age of Empires II: HD Edition",
            "playtime_2weeks": 47,
            "playtime_forever": 1144,
            "img_icon_url": "109c74df17f9b67ea47d8f01e3d1ec25278b9f73",
            "img_logo_url": "37e9da3f1174891fe38f8fb0206acda8b6bfc729"
        },
        {
            "appid": 113200,
            "name": "The Binding of Isaac",
            "playtime_2weeks": 36,
            "playtime_forever": 38,
            "img_icon_url": "383cf045ca20625db18f68ef5e95169012118b9e",
            "img_logo_url": "d9a7ee7e07dffed1700cb8b3b9482105b88cc5b5"
        }
    ]
}
}

这是我从 AJAX tut 上得到

的网站

http://runnable.com/UhY_jE3QH-IlAAAP/how-to-parse-a-json-file-using-jquery

编辑:好的,所以我,作为javascript的新手,忘记在我的jsonGamesPlayed()函数前面添加函数。感谢您@Aditya的有用评论。尽管现在一切正常,但从 .json 文件调用的数据并未附加到div...我在使用 AJAX 时做错了什么吗?

编辑2:因此,经过一些故障排除,AJAX永远不会成功通过,

function jsonGamesPlayed() {
        $.ajax({
            url: "jsonGamesPlayed.json",
            dataType: "text",
            success: function(data) {
                var json = $.parseJSON(data);
                $('#main_content').html(json.response.games[0].name);
                alert("I am an alert box!");
            }
        });
    }

我在成功功能中放置了一个警报,该警报永远不会在通话中弹出。可能出现什么问题?

这一行在这里是一个问题:

$('#main_content').append('<?php include("/HTML/about3.html")?>');

不应该在 JavaScript 函数中'append' PHP 代码。PHP 是一种服务器端语言,输出 HTML 供浏览器解析。JavaScript 是一种客户端语言,一旦页面已经呈现,它就会与这些'HTML'DOM元素进行交互。你要求 JavaScript 做一些它不知道该怎么做的事情。

话虽如此...您可以随时像这样load您的 HTML:

 $('#main_content').load("/HTML/about3.html", function() {
     // do something
 };

或者你可以用传统方式 AJAX:

 $.ajax({
    url: "/HTML/about3.html",
    type: "POST", // or "GET"
 }).done(function(the_html) {
     $("#main_content").append($(the_html));
 });