初始頁面加載后AJAX沒有觸發

Question

嗨，我有一個按鈕組，當所選按鈕更改時，應觸發一個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 / jquery和ajax

var postData;
var commentData;
var interactionData;

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

    loadGraphs(clickedID);
}
}

第一個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，但是，如果我使用按鈕組中的按鈕，它將進入loadGraphs函數，但ajax似乎已“跳過”

任何幫助將非常感謝。

更新1個 var postData; var commentData; var interactionData;

與其他javascript函數位於同一腳本標簽的頂部。

Answer 1

這是因為使用了變量。 改變的變量數據post ， comment和interation ，以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>

問題演示： 小提琴解決方案演示： 小提琴 。

Answer 2

這不是問題的答案，而是太多的代碼無法發布在注釋中。 為什么要使用內聯處理程序？ 使用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;

要么

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

在您的代碼中。

data也定義在哪里？

Answer 3

可能是您的type參數未填充。

使用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);
}
});