Javascript AJAX在初始页面加载后未启动

您好，我有一个按钮组，当所选按钮更改时，应触发ajax调用

        <div class="btn-group" id="graphSelection">
            <button type="button" class="btn disabled btn-info" id="post" onclick="graphSelection(this.id)">Posts</button>
            <button type="button" class="btn" id="comment" onclick="graphSelection(this.id)">Comments</button>
            <button type="button" class="btn" id="interaction" onclick="graphSelection(this.id)">All Interaction</button>
        </div>

第一个javascript只是更改单个按钮的css，然后在包含ajax的下一个javascript函数上调用load graph

function loadGraphs(type) {
if ((type == "post" && !postData) || (type == "comment" && !commentData) || (type == "interaction" && !interactionData)) {
    $.ajax({
        url : 'parts/' + type + '_graph.php',
        cache: false,
        type : 'POST',
        data : data,
        dataType : 'json',
        beforeSend: function() {
            $("#report-loading").fadeIn(500);
        },
        success : function (jsonData) {
                    alert(type);
            if (type == "post")
                postData = jsonData;
            else if (type == "comment")
                commentData = jsonData;
            else if (type == "interaction")
                interactionData = jsonData;

            drawChart(jsonData);
            $("#report-loading").fadeOut(500);
        },
        error : function () {
            $("#report-loading").fadeOut(500);
            alert("error");
        }
    })
}
else if (type == "post") {
    drawChart(postData);
}
else if (type == "comment") {
    drawChart(commentData);
}
else if (type == "interaction") {
    drawChart(interactionData);
}
}

在这个例子中，我检查了我要加载的图的类型，然后检查了我之前是否加载了数据。如果没有，则会触发ajax并检索所需的数据。当页面加载完成时，ajax会被一种post类型自动调用一次，但是如果我使用按钮组中的按钮，它会进入loadGraphs函数，但是ajax似乎会被跳过

任何帮助都是非常感谢的

更新1 var-postData； var数据； var交互数据

在与其他javascript函数相同的脚本标记的顶部定义。可能是没有填充类型参数

使用jquery的一种更简洁的方法是将事件监听器添加到按钮中，按钮将根据需要使用ID调用函数

$(':button.btn').click(function(){
if(!$(this).hasClass('disabled')) {
    $('#graphSelection').find('button.disabled').removeClass('disabled btn-info');
    $(this).addClass('disabled btn-info');

    loadGraphs(this.id);
}
});

---

这是因为使用了变量。将数据变量post、comment和interaction分别更改为postData、commentData和interactionData

然后将if条件更改为

if ((type == "post" && !postData) || (type == "comment" && !commentData) || (type == "interaction" && !interactionData)) {

并更改ajax回调

变量post指的是button id=post元素，其他变量也一样，我认为这是因为元素的id是全局公开的，但不知道为什么

您还需要将全局变量定义为

<script type="text/javascript">
    var postData, commentData, interactionData;
</script>

问题演示：

---

解决方案演示：。

这不是问题的答案，而且代码太多，无法在评论中发布。为什么要使用内联处理程序？使用jQuery的强大功能

function graphSelection () { 
    var clickedID = this.id;
    $(this)
        .addClass("disabled btn-info")
        .siblings()
            .removeClass("disabled btn-info");
    loadGraphs(clickedID);
}

$("#graphSelection").on("click", "button", graphSelection); 

您的问题是基于这样一个事实：浏览器正在将变量post、comment、interaction设置为指向html节点，因为看起来您从未定义过它们

我希望看到

var post, comment, interaction;

或

在你的代码中

---

数据在哪里定义？

是否检查类型变量是否已实际加载？这可能是空的。因此不满足您的任何约束是的，我使用alerttype进行检查，并将它们放在战略位置，查看代码运行的位置和未运行的位置。post、注释、交互变量定义在哪里？它们在head var postData中定义；var数据；var interactionData。。。。[更多代码]。。。。请在数据中定义数据的位置添加代码：数据，它们不是，我发出了警告，以检查代码在何处运行，它按预期运行唯一的区别是没有调用ajax是因为post和其他变量是真实的。我将检查您在编辑和报告中所做的更改。您可以在下面的小册子中检查问题，您可以发现数据变量是真实的，请始终检查控制台。好的，我做了您建议的更改，并再次确认条件是正确的，但是在页面加载上使用javascript函数中的警报进行初始ajax调用之后，ajax调用仍然没有发生，我已经测试并确保正确填充了参数。它们已在上面定义。我忘了把它加进去。var-postData；var数据；var交互数据+1关于充分使用jquery的建议，我不知道我能做到。谢谢

var post, comment, interaction;

var post = false, 
    comment = false, 
    interaction = false;