javascript - 使用 JQuery $.get() 获取数据

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/