函數結束后，ajax調用數組中的內容消失

Question

抱歉，如果我很笨，我是第一次將Jquery與Ajax調用結合使用。 幾個小時后，我找不到解決我問題的明確方法。 我有一個在單擊按鈕時啟動的功能。 在此函數中，對同一文件夾中的.json文件進行Ajax調用。 內容以字符串形式返回，我不清楚這是為什么，因為它是一個.json文件，但是我使用$ .parseJSON（）方法對其進行了解析。 解析后獲取數據時，我嘗試使用.push（）方法存儲在數組中。 稍后，我嘗試將所有內容附加到我的html文件中，這是我的代碼所做的，但是在函數的末尾，數組的內容以及在html中加載的內容都消失了，而該內容只能顯示一半在我的瀏覽器上

我真的很堅持這部分，將不勝感激！ :)

這是單擊按鈕時的方法，以及嘗試存儲調用結果的數組：

    var results = [];
var resultDiv = $('#results')

$('#go').click(function(){
    $.ajax({url : "cat.json" , async:false}).done(function(data){
        // save results
        saveResults($.parseJSON(data));
        displayResults(results);
        console.log('I got something!');

    })


        console.log('sorted!');
})

這是我的保存功能：

function saveResults(content){

    content.forEach(function(data){
        results.push(data);
    })
}

我的猜測是我沒有正確調用Ajax

Answer 1

這是更新的解決方案：

確保您的json源有效，如果有疑問，可以使用虛擬鏈接，例如http://mysafeinfo.com/api/data?list=englishmonarchs&format=json 。
請勿將<button>放入for中，它會觸發發布並刷新您的頁面
使用$.each(content, function(k, v)以便不僅檢索鍵

最后，有一個摘要工具，您可以像我一樣將HTML，CSS和JavaScript代碼拆分到此討論中。 我鼓勵您使用它。 輕松溝通！

 $(document).ready(function() { var results = []; var resultDiv = $('#results') $('#go').click(function() { $.ajax({url : "http://mysafeinfo.com/api/data?list=englishmonarchs&format=json" , async:false}).done(function(data){ // save results saveResults($.parseJSON(data)); displayResults(results); console.log('I got something!'); }); function saveResults(content) { $.each(content, function(k, v) { results.push(v); console.log(k, v); }) } }); function displayResults(input) { input.forEach(function(data, index) { resultDiv.append('<div class="panel">' + '<div class="panel-body">' + ' <h3><a href="' + data['url'] + '">Blah, I say</a></h3>' + '<div class="url">' + data['url'] + '</div>' + '<div>Relevance: 0.54</div>' + ' <div class="excerpt">' + 'Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty.' + 'Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. ' + 'Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. ' + 'Excerpty. Excerpty. Excerpty. Excerpty...' + '</div>' + '</div>' + ' </div> '); }); } function sortResults(input) { input.sort(function(item1, item2) { return item2.relevance - item1.relevance; }); } })

 <html> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="search.css"> </head> <body> <div class="container"> <h1 class="heading">Search!</h1> <div class="form-group"> <div class="input-group"> <input type="text" name="terms" id="search" class="form-control"> <span class="input-group-btn"><button class="btn btn-primary" id ='go' >Go</button></span> </div> </div> <div id="results"> <div class="panel"> <div class="panel-body"> <h3><a href="http://blah.blah.blah">Blah, I say</a></h3> <div class="url">http://blah.blah.blah</div> <div>Relevance: 0.54</div> <div class="excerpt"> Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty. Excerpty... </div> </div> </div> </div> </div> <script src="search.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </body> </html>

函數結束后，ajax調用數組中的內容消失

問題描述

1 個解決方案

解決方案1
0 已采納 2018-10-01 01:23:27

函數結束后，ajax調用數組中的內容消失

問題描述

1 個解決方案

解決方案1 0 已采納 2018-10-01 01:23:27

解決方案1
0 已采納 2018-10-01 01:23:27