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

I'm new to java-script,I'm trying to use wikipedia api to build a simple demo to show the results of what I typed.When I use jQuery $.get() to access json data,before the data returns and the code goes on(because the $.get() works Asynchronously I think?),and the dataArr haven't catch any data yet, so I cannot add my query results to the pages.The js code goes below:

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();

The html code goes here:

<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>

Again,I'm new to the web development,if there is any advice about other issues in my code,I be very thankful. `

You have to use .done(function(){..}); like below:-

$.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);
        });
    });
};

Note:- you can use }).complete(function () { also

Reference:-https://api.jquery.com/jquery.get/

Yes, In javascript Ajax is async You need to write logic in callback. You have mistake in getData function dataArr.forEach loop call before data actually retrived. You must write this loop in ajax(jquery's $.get) callback function. Following code should work fine.

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

Put everything you need to execute with dataArr inside the get callback

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" );
    });
}

use done.functione(response){} to become more wonderful like this :

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