为搜索按钮绑定处理方法:
$(function() { $('#btnSearch').click(function() { //这里调用最关键的Search方法,取数据 Search(); }); });
下面来看最关键的Search部分,调用API获取结果数据:
$(function() { function Search() { //获取用户输入的搜索词,并替换空格为“+” var searchTerms = $('#txtQuery').val().replace(" ", "+"); //将接口需要的所有参数封装为数组 var arr = [AppId, Query + searchTerms, Sources, Version, Market, Options, "Web.Count=" + WebCount, "Web.Offset=" + WebOffset, "JsonType=callback", "JsonCallback=?"]; //将参数数组拼装成url串,最终得到bing的URL Service的请求URL var requestStr = "http://api.search.live.net/json.aspx?" + arr.join("&"); //通过jquery ajax调用bing json数据接口 $.ajax({ type: "GET", url: requestStr, //指定数据类型为jsonp dataType: "jsonp", //调用成功后返回数据对象,并调用处理方法 success: function(msg) { SearchCompleted(msg); }, error: function(msg) { alert("Something hasn't worked\n" + msg.d); } }); } });
我们看到在使用jquery ajax时,指定数据类型为jsonp,jsonp是一种可跨域访问的协议,我对其也不是非常清楚,可以在这里了解一下。另外 CSS9.NET 也计划在后面的文章中讲解json的相关知识,敬请关注。
再来看获取到数据后的UI处理,主要包括显示结果和显示错误信息两部分:
function SearchCompleted(response) { //检查结果数据对象中的Errors对象,判断是否发生错误 var errors = response.SearchResponse.Errors; if (errors != null) { // 发生错误的话调用错误信息显示方法 DisplayErrors(errors); } else { // 没有错误的话调用结果信息显示方法 DisplayResults(response); } }
出处:css9.net
责任编辑:bluehearts
上一页 jQuery+Bing API实现简易搜索引擎 [1] 下一页 jQuery+Bing API实现简易搜索引擎 [3]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|