zoukankan      html  css  js  c++  java
  • 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 + "" + 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 + "" + 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 + "" + 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"}]}  
  • 相关阅读:
    实验axios用户登录及token验证
    vue的路由跳转了,可是页面没有变化
    搞清楚cookie,session,token,JWT
    APP应用测试流程
    Scrum敏捷开发
    APP项目环境及发布平台
    ssh -T git@github.com ssh: connect to host github.com port 22: Connection timed out
    pytest与unitest区别
    数据库三大范式--大白话
    docker 安装mysql挂载/var/lib/mysql目录时启动就退出
  • 原文地址:https://www.cnblogs.com/ACMxike20111726/p/3253896.html
Copyright © 2011-2022 走看看