|
為搜索按鈕綁定處理方法：
$(function() {
$('#btnSearch').click(function() {
//這里調(diào)用最關(guān)鍵的Search方法，取數(shù)據(jù)
Search();
});
});
下面來看最關(guān)鍵的Search部分，調(diào)用API獲取結(jié)果數(shù)據(jù)：
$(function() {
function Search() {
//獲取用戶輸入的搜索詞，并替換空格為“+”
var searchTerms = $('#txtQuery').val().replace(" ", "+");
//將接口需要的所有參數(shù)封裝為數(shù)組
var arr = [AppId, Query + searchTerms, Sources, Version, Market, Options, "Web.Count=" + WebCount, "Web.Offset=" + WebOffset, "JsonType=callback", "JsonCallback=?"];
//將參數(shù)數(shù)組拼裝成url串，最終得到bing的URL Service的請求URL
var requestStr = "
//通過jquery ajax調(diào)用bing json數(shù)據(jù)接口
$.ajax({
type: "GET",
url: requestStr,
//指定數(shù)據(jù)類型為jsonp
dataType: "jsonp",
//調(diào)用成功后返回數(shù)據(jù)對象，并調(diào)用處理方法
success: function(msg) {
SearchCompleted(msg);
},
error: function(msg) {
alert("Something hasn't worked\n" + msg.d);
}
});
}
});
我們看到在使用jquery ajax時，指定數(shù)據(jù)類型為jsonp，jsonp是一種可跨域訪問的協(xié)議，我對其也不是非常清楚，可以在這里了解一下。另外 CSS9.NET 也計劃在后面的文章中講解json的相關(guān)知識，敬請關(guān)注。
再來看獲取到數(shù)據(jù)后的UI處理，主要包括顯示結(jié)果和顯示錯誤信息兩部分：
function SearchCompleted(response) {
//檢查結(jié)果數(shù)據(jù)對象中的Errors對象，判斷是否發(fā)生錯誤
var errors = response.SearchResponse.Errors;
if (errors != null) {
// 發(fā)生錯誤的話調(diào)用錯誤信息顯示方法
DisplayErrors(errors);
}
else {
// 沒有錯誤的話調(diào)用結(jié)果信息顯示方法
DisplayResults(response);
}
}
出處：css9.net
責任編輯：bluehearts
上一頁 jQuery+Bing API實現(xiàn)簡易搜索引擎 [1] 下一頁 jQuery+Bing API實現(xiàn)簡易搜索引擎 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 jQuery+Bing API實現(xiàn)簡易搜索引擎 [2]
