Guardian API搜索Javascript JSONP

Question

我有一個html頁面，我可以鍵入一個主題來搜索名爲「搜索」的文本框，並且有一個名爲「searchbutton」的提交按鈕。我試圖搜索監護人API，然後將結果加載到「內容」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>