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"}]}



是的,JSONP一般用于跨域获取JSON格式的数据,无法直接用于获取text格式的数据。如果需要获取text格式的数据,可以使用代理页面的方式实现跨域访问。 代理页面的方式是指在同一域名下创建一个代理页面,用于在客户端和服务器端之间传递数据。客户端将数据发送到代理页面,代理页面再将数据转发给服务器端,服务器处理数据后再将结果发送回代理页面,代理页面再将结果传递给客户端。 具体实现方式如下: 1. 创建代理页面proxy.html: ```html <!-- proxy.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>代理页面</title> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script> <script> function proxy() { var data = window.location.search.substring(1); axios.post('http://example.com/proxy', data, { headers: { 'Content-Type': 'text/plain;charset=UTF-8' } }).then(function(response) { window.parent.postMessage(response.data, '*'); }).catch(function(error) { console.log(error); }); } window.onload = proxy; </script> </head> <body> </body> </html> ``` 2. 在父页面中,将需要获取的text格式数据以字符串形式作为参数,发送到代理页面: ```js // 父页面 var text = '这是需要获取的文本'; var proxyUrl = 'http://example.com/proxy.html'; var iframe = document.createElement('iframe'); iframe.style.display = 'none'; iframe.src = proxyUrl + '?' + text; document.body.appendChild(iframe); window.addEventListener('message', function(event) { console.log(event.data); }); ``` 3. 在服务器端,接收代理页面发送的数据,并返回处理结果: ```js // 服务器端 const express = require('express'); const app = express(); const bodyParser = require('body-parser'); app.use(bodyParser.text()); app.post('/proxy', (req, res) => { const text = req.body; // 处理text格式的数据 const result = text.toUpperCase(); res.send(result); }); app.listen(80, () => { console.log('服务器已启动'); }); ``` 需要注意的是,代理页面需要在服务器端进行处理,并且需要考虑数据安全性的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值