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>放在其中，它会触发发布并刷新您的页面
使用$.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 个答案: