jsonp获取服务器数据的方式
生活随笔
收集整理的這篇文章主要介紹了
jsonp获取服务器数据的方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- jsonp獲取服務器的數據,有兩種??
- 一,跨域??
- 二,不跨域??
- 如果跨域??
- js的寫法有兩種??
- 1,??
- <script?type="text/javascript">??
- ??
- ??$(function()?{??
- ??$.getJSON('http://localhost:8090/search?jsoncallback=?'?,??
- ??????????????function(json)?{??
- ????????????????????alert(json);??
- ????????????????????var?html?=?"";??
- ????????????????????for?(var?key?in?json.data)?{??
- ????????????????????????html?=?html?+?"<img?src='http://localhost:8090/img/99999/o/"?+?json.data[key].filename?+?"'><br>";??
- ????????????????????????html?=?html?+?"名稱:"?+?json.data[key].filename?+?"<br>";??
- ????????????????????????html?=?html?+?"category:"?+?json.data[key].category?+?"<br>";??
- ????????????????????????html?=?html?+?"height:"?+?json.data[key].height?+?"<br>";??
- ????????????????????????html?=?html?+?"width:"?+?json.data[key].width?+?"<br>";??
- ????????????????????????html?=?html?+?"length:"?+?json.data[key].length?+?"<br>";??
- ????????????????????????html?=?html?+?"<hr>";??
- ????????????????????}??
- ??
- ????????????????????$('#imageList').html(html);??
- ????????????????}??
- ????????????????);??
- ????});??
- ??
- </script>??
- get的ur后面有jsoncallback=???
- 這時候,要在服務器端增加如下代碼??
- hr.getParameter("jsoncallback")?+"({jsonp數據的格式})"??
- 例子??
- jQuery1510062266528242707175_1324369820794({"data":[{"category"?:?"all","height"?:?"194","_id"?:?"4ebce7b5523e7e91029f910a","keyword"?:?"","width"?:?"259","chunkSize"?:?"262144","length"?:?"9082","md5"?:?"534a94756fc98a6db0483ee702297a82","filename"?:?"img001_images_029.jpeg","contentType"?:?"null","uploadDate"?:?"Fri?Nov?11?18:15:33?JST?2011","aliases"?:?"null"},{"category"?:?"all","height"?:?"194","_id"?:?"4ebce7b5523e7e91029f9108","keyword"?:?"","width"?:?"259","chunkSize"?:?"262144","length"?:?"10987","md5"?:?"7b85b894132f78b2b90cd3fef27317a6","filename"?:?"img001_images_028.jpeg","contentType"?:?"null","uploadDate"?:?"Fri?Nov?11?18:15:33?JST?2011","aliases"?:?"null"}]});??
- 注意,是如下格式jQuery1510062266528242707175_1324369820794({xxxx}),要加個()的哦。??
- ??
- 2,get的ur后面有jsoncallback=?的寫法可以改為get的ur后面有jsoncallback=getdata??
- 同時???function(json)?前要加上getdata=??
- 具體如下??
- <script?type="text/javascript">??
- ??
- ??$(function()?{??
- ??$.getJSON('http://localhost:8090/search?jsoncallback=getdata'?,??
- ??????????????getdata=function(json)?{??
- ????????????????????alert(json);??
- ????????????????????var?html?=?"";??
- ????????????????????for?(var?key?in?json.data)?{??
- ????????????????????????html?=?html?+?"<img?src='http://localhost:8090/img/99999/o/"?+?json.data[key].filename?+?"'><br>";??
- ????????????????????????html?=?html?+?"名稱:"?+?json.data[key].filename?+?"<br>";??
- ????????????????????????html?=?html?+?"category:"?+?json.data[key].category?+?"<br>";??
- ????????????????????????html?=?html?+?"height:"?+?json.data[key].height?+?"<br>";??
- ????????????????????????html?=?html?+?"width:"?+?json.data[key].width?+?"<br>";??
- ????????????????????????html?=?html?+?"length:"?+?json.data[key].length?+?"<br>";??
- ????????????????????????html?=?html?+?"<hr>";??
- ????????????????????}??
- ??
- ????????????????????$('#imageList').html(html);??
- ????????????????}??
- ????????????????);??
- ????});??
- ??
- </script>??
- 這個時候,服務器端就不需要加上hr.getParameter("jsoncallback")了,直接返回json格式就行了。??
- ??
- ??
- 具體參見??
- http://www.cnblogs.com/5201314/archive/2009/06/23/1509552.html??
- http://51mst.iteye.com/blog/1170798??
- ??
- 二,如果是不跨域的,??
- 不需要加上jsoncallback,直接如下就行了,同時服務器返回的格式,就是純jsonp的格式。??
- <script?type="text/javascript">??
- ??$(function()?{??
- ??$.getJSON('http://localhost:8090/search'?,??
- ??????????????function(json)?{??
- ????????????????????alert(1);??
- ????????????????????var?html?=?"";??
- ????????????????????for?(var?key?in?json.data)?{??
- ????????????????????????html?=?html?+?"<img?src='http://localhost:8090/img/99999/o/"?+?json.data[key].filename?+?"'><br>";??
- ????????????????????????html?=?html?+?"名稱:"?+?json.data[key].filename?+?"<br>";??
- ????????????????????????html?=?html?+?"category:"?+?json.data[key].category?+?"<br>";??
- ????????????????????????html?=?html?+?"height:"?+?json.data[key].height?+?"<br>";??
- ????????????????????????html?=?html?+?"width:"?+?json.data[key].width?+?"<br>";??
- ????????????????????????html?=?html?+?"length:"?+?json.data[key].length?+?"<br>";??
- ????????????????????????html?=?html?+?"<hr>";??
- ????????????????????}??
- ??
- ????????????????????$('#imageList').html(html);??
- ????????????????}??
- ????????????????);??
- ????});??
- ??
- </script>??
- 服務器返回代碼??
- {"data":[{"category"?:?"all","height"?:?"194","_id"?:?"4ebce7b5523e7e91029f910a","keyword"?:?"","width"?:?"259","chunkSize"?:?"262144","length"?:?"9082","md5"?:?"534a94756fc98a6db0483ee702297a82","filename"?:?"img001_images_029.jpeg","contentType"?:?"null","uploadDate"?:?"Fri?Nov?11?18:15:33?JST?2011","aliases"?:?"null"}]}??
轉載于:https://www.cnblogs.com/ACMxike20111726/p/3253896.html
總結
以上是生活随笔為你收集整理的jsonp获取服务器数据的方式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 小伙伴们惊呆了!10行 JavaScri
- 下一篇: 获取RadioButton选中的值