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

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

javascript jquery ajax

Javascript 使用JQuery$.get（）获取数据,javascript,jquery,ajax,Javascript,Jquery,Ajax,我不熟悉java脚本，我正试图使用wikipedia api构建一个简单的演示来显示我键入的内容的结果。当我使用jQuery$.get（）访问json数据时，在数据返回和代码继续之前（因为我认为$.get（）是异步工作的），而dataArr还没有捕获任何数据，因此，我无法将查询结果添加到页面中。js代码如下： function getData(queryStr) { var dataArr = []; var url = 'https://en.wikipedia.org/w/a

我不熟悉java脚本，我正试图使用

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

函数getData（queryStr）{
var dataArr=[]；
var url='1〕https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|摘录和抓取=max&exintro&explaintext&ex句意=1&exlimit=max&origin=*&gsrsearch='；
var addr=url+queryStr；
$.get（地址，函数（数据）{
console.log（data.query.pages）；
for（data.query.pages中的var键）{
dataArr.push（data.query.pages[key]）；
}
});
dataArr.forEach（函数（元素、索引）{
如果（指数=10）{
返回；
}
//var pageid=elem.pageid；
var title=“”+elem.title+”；
var extract=''+elem.extract+''；
var resultDiv=''+标题+摘要+''；
$（“.showResultes”）.append（resultDiv）；
})
};
函数prepareBtn（）{
var queryResult=[]；
$（“.searchBtn”）。单击（函数（）{
var queryStr=“”；
if（$（“#queryStr”）.val（））{
queryStr=$（“#queryStr”）.val（）；
$（“.showResultes”）.empty（）；
getData（queryStr）；
}否则{
警告（“请输入内容！”）；
返回；
}
});
}
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>


搜索

再说一次，我是网络开发新手，如果在我的代码中有任何关于其他问题的建议，我将非常感谢。

您必须使用

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

$.get（地址，函数（数据）{
console.log（data.query.pages）；
for（data.query.pages中的var键）{
dataArr.push（data.query.pages[key]）；
}
}).done（函数（）{
dataArr.forEach（函数（元素、索引）{
如果（指数=10）{
返回；
}
//var pageid=elem.pageid；
var title=“”+elem.title+”；
var extract=''+elem.extract+''；
var resultDiv=''+标题+摘要+''；
$（“.showResultes”）.append（resultDiv）；
});
});
};

注意：-您可以使用}）.complete（函数（）{
也可以
参考：-
您必须使用.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);
        });
    });
};

$.get（地址，函数（数据）{
console.log（data.query.pages）；
for（data.query.pages中的var键）{
dataArr.push（data.query.pages[key]）；
}
}).done（函数（）{
dataArr.forEach（函数（元素、索引）{
如果（指数=10）{
返回；
}
//var pageid=elem.pageid；
var title=“”+elem.title+”；
var extract=''+elem.extract+''；
var resultDiv=''+标题+摘要+''；
$（“.showResultes”）.append（resultDiv）；
});
});
};

注意：-您可以使用}）.complete（函数（）{
也可以
参考：-
是的，在javascript中Ajax是异步的，您需要在回调中写入逻辑。在实际检索数据之前，getData函数dataArr.forEach循环调用中存在错误。您必须在Ajax（jquery的$.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);
       })
    });
}

函数getData（queryStr）{
var dataArr=[]；
var url='1〕https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|摘录和抓取=max&exintro&explaintext&ex句意=1&exlimit=max&origin=*&gsrsearch='；
var addr=url+queryStr；
$.get（地址，函数（数据）{
console.log（data.query.pages）；
for（data.query.pages中的var键）{
dataArr.push（data.query.pages[key]）；
}
dataArr.forEach（函数（元素、索引）{
如果（指数=10）{
返回；
}
//var pageid=elem.pageid；
var title=“”+elem.title+”；
var extract=''+elem.extract+''；
var resultDiv=''+标题+摘要+''；
$（“.showResultes”）.append（resultDiv）；
})
});
}
是的，在javascript中，Ajax是异步的，您需要在回调中写入逻辑。在实际检索数据之前，getData函数dataArr.forEach循环调用中存在错误。您必须在Ajax（jquery的$.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);
       })
    });
}

函数getData（queryStr）{
var dataArr=[]；
var url='1〕https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|摘录和抓取=max&exintro&explaintext&ex句意=1&exlimit=max&origin=*&gsrsearch='；
var addr=url+queryStr；
$.get（addr，函数（数据）{
console.log（data.query.pages）；
for（data.query.pages中的var键）{
dataArr.push（data.query.pages[key]）；
}
dataArr.forEach（函数（元素、索引）{
如果（指数=10）{
返回；
}
//var pageid=elem.pageid；
var title=“”+elem.title+”；
var extract=''+elem.extract+''；
var resultDiv=''+标题+摘要+''；
$（“.showResultes”）.append（resultDiv）；
})
});
}
将使用dataArr执行的所有操作都放在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]);
        }
        //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" );
    });
}

函数getData（queryStr）{
var dataArr=[]；
var url='1〕https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gs