Guardian API搜索Javascript JSONP

Question

我有一个html页面，我可以在其中键入一个主题，然后在名为" search“的文本框中进行搜索，还有一个名为"searchbutton”的提交按钮。我试图搜索guardian API，然后将结果加载到"content“div中的html页面上，然而，我不知道哪里出错了，希望能得到一些帮助。我不需要API密钥，因为我使用的是公共版本。谢谢,

var baseURL = "http://content.guardianapis.com/search";
var searchQuery;

function init() {
  var search = document.getElementById("search");
  var searchButton = document.getElementById("searchbutton");
  searchButton.onclick = getSearchValue;
}

function getSearchValue () {
   var search = document.getElementById("search");
   var searchResult = search.value;
   searchQuery = searchResult.replace(" ", "+");
   loadSearch();
}

function loadSearch() {
    makeJSONPCall(searchQuery, "loadSearchCallBack");
}  


function makeJSONPCall(queryPart, callback) {
    var url = baseURL + "?q=";
    url = url + queryPart;
    url = url + "&callback=" + callback;
    var scriptElement = document.createElement("script");
    scriptElement.id = "jsonp";
    scriptElement.src = url;
    document.head.appendChild(scriptElement);
}

function loadSearchCallBack(data){
   cleanupScript();
   listResults(data);
}

function listResults(data) {
   for ( var i=0; i< data.response.results.length; i++) {
      var list = data.response[i];
      renderResults(i, data.response[i]);
   }
}

function renderResults(i, list) {
var resultDiv = document.getElementById("content");
resultDiv.innerHTML = list.results[i].webTitle;

}

function cleanupScript() {
var scriptElement = document.getElementById("jsonp");
scriptElement.parentNode.removeChild(scriptElement);
}


window.onload = init;

Answer 1

我最终做了一个jsfiddle，包括几个更改。

JavaScript：

var baseURL = "http://content.guardianapis.com/search";
var searchQuery;
function init() {
    var search = document.getElementById("search");
    var searchButton = document.getElementById("searchbutton");
    searchButton.onclick = getSearchValue;
}
function getSearchValue() {
    var search = document.getElementById("search");
    var searchResult = search.value;
    searchQuery = searchResult.replace(" ", "+");
    loadSearch();
}
function loadSearch() {
    makeJSONPCall(searchQuery, "loadSearchCallBack");
}
function makeJSONPCall(queryPart, callback) {
    var url = baseURL + "?q=";
    url = url + queryPart;
    url = url + "&callback=" + callback;
    var scriptElement = document.createElement("script");
    scriptElement.id = "jsonp";
    scriptElement.src = url;
    document.head.appendChild(scriptElement);
}
function loadSearchCallBack(data) {
    listResults(data);
    cleanupScript();
}
function listResults(data) {
    for (var i = 0; i < data.response.results.length; i++) {
        var list = renderResults(data.response.results[i]);
    }
}
function renderResults(result) {
    var resultDiv = document.getElementById("content");
    resultDiv.innerHTML += result.webTitle;
}

function cleanupScript() {
    var scriptElement = document.getElementById("jsonp");
    scriptElement.parentNode.removeChild(scriptElement);
}
init();

Html：

<input id="search" type="search" />
<button id="searchbutton">Search</button>
<div id="content"></div>