Question

我是java-script的新手，我正在尝试使用wikipedia api构建一个简单的演示来显示我输入的结果。当我使用jQuery $ .get（）来访问json数据时，在数据返回并且代码继续之前（因为$ .get（）异步工作，我认为？），而dataArr还没有捕获任何数据，所以我无法将我的查询结果添加到页面.js代码如下：

function getData(queryStr) {
    var dataArr = [];
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&origin=*&gsrsearch=';
    var addr = url + queryStr;
    $.get(addr, function (data) {
        console.log(data.query.pages);
        for (var key in data.query.pages) {
            dataArr.push(data.query.pages[key]);
        }
    });
    dataArr.forEach(function (elem, index) {
        if (index == 10) {
            return;
        }
        //var pageid = elem.pageid;
        var title = "<h2 class='title'>" + elem.title + "</h2>";
        var extract = '<p class="extract">' + elem.extract + '</p>';
        var resultDiv = '<div class="searchResults">' + title + abstract + '</div>';
        $(".showResultes").append(resultDiv);
    })
};

function prepareBtn() {
    var queryResult = [];
    $(".searchBtn").click(function () {
        var queryStr = "";
        if ($("#queryStr").val()) {
            queryStr = $("#queryStr").val();
            $(".showResultes").empty();
            getData(queryStr);
        } else {
            alert("please input something!");
            return;
        }
    });
}

window.onload = prepareBtn();

html代码在这里：

<div class="form-inline text-center inputSearch">
        <img src="https://en.wikipedia.org/static/images/project-logos/enwiki-2x.png">
        <input type="text" class="form-control" id="queryStr"
               placeholder="plz input"> <button class="btn btn-primary searchBtn">search</button>
    </div>
    <div class="showResultes">

    </div>

同样，我是网络开发的新手，如果我的代码中有任何关于其他问题的建议，我会非常感激。 `

Answer 1

您必须使用以下.done(function(){..});： -

$.get(addr, function (data) {
        console.log(data.query.pages);
        for (var key in data.query.pages) {
            dataArr.push(data.query.pages[key]);
        }
    }).done(function(){
        dataArr.forEach(function (elem, index) {
            if (index == 10) {
                return;
            }
            //var pageid = elem.pageid;
            var title = "<h2 class='title'>" + elem.title + "</h2>";
            var extract = '<p class="extract">' + elem.extract + '</p>';
            var resultDiv = '<div class="searchResults">' + title + abstract + '</div>';
            $(".showResultes").append(resultDiv);
        });
    });
};

注意： - 您也可以使用}).complete(function () {

参考： - https://api.jquery.com/jquery.get/

Answer 2

是的，在javascript中Ajax是异步你需要在回调中编写逻辑。在数据实际重新执行之前，您在getData函数dataArr.forEach循环调用中有错误。您必须在ajax（jquery＆＃39; s $ .get）回调函数中编写此循环。以下代码应该可以正常工作。

function getData(queryStr) {
    var dataArr = [];
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&origin=*&gsrsearch=';
    var addr = url + queryStr;
    $.get(addr, function (data) {
        console.log(data.query.pages);
        for (var key in data.query.pages) {
            dataArr.push(data.query.pages[key]);
        }
        dataArr.forEach(function (elem, index) {
           if (index == 10) {
               return;
           }
           //var pageid = elem.pageid;
           var title = "<h2 class='title'>" + elem.title + "</h2>";
           var extract = '<p class="extract">' + elem.extract + '</p>';
           var resultDiv = '<div class="searchResults">' + title + abstract + '</div>';
           $(".showResultes").append(resultDiv);
       })
    });
}

Answer 3

在get callback中使用dataArr执行您需要执行的所有操作

function getData(queryStr) {
    var dataArr = [];
    var url = 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&origin=*&gsrsearch=';
    var addr = url + queryStr;
    $.get(addr, function(data) {
        console.log(data.query.pages);
        for (var key in data.query.pages) {
            dataArr.push(data.query.pages[key]);
        }
        //we are inside the get callback. Since get is asycronous the only way to get the things done with your array is to move everything in get callback. When get will be executed you will have available your 'dataArr' filled with the result
        dataArr.forEach(function(elem, index) {
            if (index == 10) {
                return;
            }
            //var pageid = elem.pageid;
            var title = "<h2 class='title'>" + elem.title + "</h2>";
            var extract = '<p class="extract">' + elem.extract + '</p>';
            var resultDiv = '<div class="searchResults">' + title + abstract + '</div>';
            $(".showResultes").append(resultDiv);
        });
    })
    .fail(function() {//in case an error occurs
        alert( "error" );
    });
}

Answer 4

使用done.functione(response){}变得更加精彩：

      $.ajax({
            type: 'GET',
            url: 'xxxxx',
            dataType: 'jsonp'}).done(function(response){
              console.log(response);
      });

使用JQuery $ .get（）获取数据

4 个答案: