正文

jsonp获取服务器数据的方式

IP云
IP云V管理员/1 阅读
07/24
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
  • 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"}]}