【jquery mobile笔记二】jquery mobile调用豆瓣api示例

页面主要代码如下

<div data-role="page" id="page1">
    <div data-role="header">
      <div data-role="fieldcontain">
   
            <input name="search" id="search" placeholder="" value="速度与激情" type="search" data-mini="true" 
            onClick="clearTxt()"/>
            <label for="search"><input  name="subBtn" id="subBtn" type="submit" value="查询" onClick="inqInfo()"/></label>

</div>
    </div>
    <div data-role="content">
    </div>
</div>

一个搜索框，一个查询按钮，查询按钮的inqInfo()方法如下

function inqInfo(){
var name = $('#search').val();
if(""!=name){
var url = "https://api.douban.com/v2/movie/search?apikey=xxxxxxxx&q="+name;
$.ajax({ 
url:url, 
type: "GET", 
dataType: 'jsonp', 
jsonp: 'callback', 
success: function (json) {
alert(json.count);
},  
error: function(xhr){ 
alert("对不起出错了~)"); 
} 
}); 
}
}

-------------------------------------------------------------------------------------

利用jq自己的ajax跨域来请求豆瓣的api，一定要跨域，使用dataType: 'jsonp', 和jsonp: 'callback', 否则浏览器会因为安全原因很有可能调不到豆瓣的api，并且jsonp属性的值为'callback'，是豆瓣约定好的，如果写成别的不起作用。url用的是豆瓣电影api，apikey为豆瓣开发者申请的key，换成自己的就行了。注意如果不传apikey1个ip1分钟只能调用10次，有了apikey1个ip1分钟可以调用40次。想要更多的调用次数可以和豆瓣联系。参数name是搜索框传入的值。如果调用成功则进入success方法，失败进入error方法。调用成功反悔json格式的结果。具体可参考豆瓣api。http://developers.douban.com/wiki/?title=api_v2