jQuery --嵌套ajax调用并使用每次调用的数据- wikipedia API
jQuery --嵌套ajax调用并使用每次调用的数据- wikipedia API
提问于 2018-08-14 05:49:43
我在使用jQuery嵌套ajax调用到wikipedia api时遇到了问题。HTML很简单，只有一个输入表单和一个按钮：
<input id='search-input' type="text" class="form-control">
<button id="search-button" type="button" class="btn btn-primary">Search</button>
<div id ='outputDiv'></div>THe搜索按钮有一个事件侦听器，它会触发一个从wikipedia API获取数据的函数：
...
searchBtn.addEventListener('click', searchwiki);
...
function searchwiki(){
let searchTermObjects =[]
let term = inputfield.value;
let titleUrl = search_term(term);
createWikiObject(titleUrl).then(function(){
searchTermObjects.forEach(function(elem){
addExtrctToObj(elem)
})
}).then(function(data){
append_result(searchTermObjects)
})
}
function createWikiObject(titleUrl){
return $.ajax({
type: "GET",
url: titleUrl,
dataType : 'jsonp',
async: true,
error : function(ermsg){
console.log('error in searching',ermsg)
},}).then(function(data){
for(let i = 0; i < data[1].length; i ++){
searchTermObjects.push({
'title': data[1][i].replace(/\s+/g, '_'),
'description': data[2][i],
'url': data[3][i],
})
}; // this for loop should push each result as an object to an array named searchtTermObjects, and i am planning to use this array in the next ajax call to add another property named extract to each object in array
}
);
}
function addExtrctToObj(obj){
console.log(obj)
return $.ajax({
type: "GET",
url: get_text(obj['title']),
dataType : 'jsonp',
async: true,
error : function(ermsg){
console.log('error getting text',ermsg)
}
}).then(function (data){
let pageID = Object.keys(data.query.pages);
if(data.query.pages[pageID].hasOwnProperty('extract')){
obj['extract'] = data.query.pages[pageID].extract;
}
// this function adds the extracted text for each article ,
// the searchTermObjects now looks something like:
/ [{'title':...,'url':...,'description':...,'extract':..},{...}]
})
};
function append_result(termsObjectsArray){
// this function should loop through the searchtermobjects and append leading text for each object in the array to the Output div under the button
for (let i = 0; i < termsObjectsArray.length; i++){
let newDiv = document.createElement('div');但是，Object.keys(termsObjectsArray[i])此时仅返回三个密钥，并且看不到提取密钥‘
console.log(Object.keys(termsObjectsArray[i]))
newDiv.classList.add('wiki-result');
newDiv.innerHTML = termsObjectsArray[i]["extract"];这就是我遇到错误的地方-- newDiv的inerHtml具有未定义的值
outputDiv.appendChild(newDiv);
}
}
// the api calls are formed with these functions:
let base_url = "https://en.wikipedia.org/w/api.php";
function search_term(term) {
let request_url = base_url + "?action=opensearch&search=" + term + "&format=json&callback=?";
return request_url;
}
function get_text(term){
let request_url = base_url + "?action=query&prop=extracts&exintro=&format=json&titles=" + term; // explaintex= returns plaintext, if ommited returns html
return request_url;
}在提取之后，我得到了我需要的东西，数组中的对象都有4个属性，都有正确的名称，但我不明白为什么append_result函数看不到‘console.log(searchTermObjects)’键。
在控制台中被记录的对象旁边是一个'i‘符号，上面写着’下面的值刚刚被求值‘，在那里我得到了我想要的--每个搜索结果都是一个带有标题、url、描述和提取关键字的对象。
将此代码复制到您的IDE，看看您是否可以帮助我找到解决方案。
回答 1
Stack Overflow用户
发布于 2018-08-14 06:29:13
我相信你遇到的问题是你正在尝试返回一个延迟的对象，但是由于延迟，还没有返回任何东西。
return $.ajax({
type: "GET",
url: get_text(obj['title']),
dataType : 'jsonp',
async: true,
error : function(ermsg){
console.log('error getting text',ermsg)
}
})async值为true，因此代码在请求完成之前就会继续运行，您将得到一个null值。
尝试设置async: false，看看是否会得到更好的响应。正如Andrew Lohr在评论中指出的那样，这不是解决问题的好方法，它只会告诉你这就是问题所在。
如果是，那么我建议不要将请求分解为多个函数。您应该使用延迟方法将AJAX调用链接起来。它的结构是这样的：
$.ajax({ ... }).then(function(data){
// ... do something with the data ...
// Make your followup request.
$.ajax({ ... }).then(function(data) {
// ... finalize the response ...
});
});还可以考虑在ajax调用中使用context选项来传递一个回调方法，该方法可以在链完成后触发。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51831058
复制相关文章
相似问题