我使用Bing新闻API搜索基于输入的单词的新闻文章。然后我想为新闻文章描述中的每个单词显示一个图像。出于某种原因,我不认为Flickr Api正在识别字符串。
HTML
<input id="searchterm" />
<button id="search">search</button>
<div id="results"></div>
的Javascript
var news;
$("#search").click(function() {
var wordVal = $("#searchterm").val();
var wordSpilt = wordVal.split(" ");
textVal = document.getElementById("searchterm").value;
ajaxCall(textVal);
});
function ajaxCall(textVal) {
$.ajax({
headers: {
"Ocp-Apim-Subscription-Key": "9bbe6e6182644abb8ff11df1b6e43035"
},
method: "GET",
url: "https://api.cognitive.microsoft.com/bing/v5.0/news/search? q=" +
textVal + "&count=10&offset=0&mkt=en-us&safeSearch=Moderate"
}).done(function(msg) {
news = msg;
console.log(news);
var newsVal = news.value[0].description;
regex(newsVal);
})
}
function regex(newsVal) {
var newsPun = newsVal.replace(/(~|`|!|@|#|$|%|^|&|\*|\(|\)|{|}|\[|\]|;|:|\"|'|<|,|\.|>|\?|\/|\\|\||-|_|\+|=)/g, "");
runFlickr(newsPun)
}
function runFlickr(newsPun) {
var newSplit = newsPun.split(" ");
for (i = 0; i < newSplit.length; i++) {
console.log(newSplit[i]);
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne? jsoncallback=?", {
tags: $(newSplit[i]),
tagmode: "any",
format: "json"
},
function(data) {
$.each(data.items, function(i, item) {
$("<img/>").attr("src", item.media.m).prependTo("#results");
if (i == 0) return false;
});
});
}
};
有关为何发生这种情况的任何建议?
答案 0 :(得分:0)
您的代码似乎运行得很好,但url构建除外。在您的问题中,您使用了字符串:
"https://api.cognitive.microsoft.com/bing/v5.0/news/search? q="
只需删除空白区域,我就可以使代码段正常运行。
var news;
$("#search").click(function() {
textVal = document.getElementById("searchterm").value;
ajaxCall(textVal);
});
function ajaxCall(textVal) {
$.ajax({
headers: {
"Ocp-Apim-Subscription-Key": "9bbe6e6182644abb8ff11df1b6e43035"
},
method: "GET",
url: "https://api.cognitive.microsoft.com/bing/v5.0/news/search?q=" +
textVal + "&count=10&offset=0&mkt=en-us&safeSearch=Moderate"
}).done(function(msg) {
news = msg;
var newsVal = news.value[0].description;
regex(newsVal);
})
}
function regex(newsVal) {
var newsPun = newsVal.replace(/(~|`|!|@|#|$|%|^|&|\*|\(|\)|{|}|\[|\]|;|:|\"|'|<|,|\.|>|\?|\/|\\|\||-|_|\+|=)/g, "");
runFlickr(newsPun);
}
function runFlickr(newsPun) {
var newSplit = newsPun.split(" ");
for (var i = 0; i < newSplit.length; i++) {
$.getJSON("https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", {
tags: newSplit[i],
tagmode: "any",
format: "json"
})
.done(function(data) {
console.log(data);
$.each(data.items, function(i, item) {
$("<img/>").attr("src", item.media.m).prependTo("#results");
if (i == 0) return false;
});
});
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="searchterm" />
<button id="search">search</button>
<div id="results"></div>
您的代码存在的问题是wordVal
和textVal
完全相同,#searchterm
的价值,所以请检查一下。
修改强>
您的闪烁ajax请求语法出现问题,您需要提供.done(function(data))
作为成功回调。
PS:获取描述中每个字的图像并不是一个好主意。有些词没有语义价值(即“a”,“the”,“some”,“here”,“there”)。您可能想要找到一种过滤掉这些词的方法。