使用jsonp获取腾讯天气接口案例

1 第一步要注意接口的链接是否正确 可以使用postman进行测试一下。

2 查看相关文档 看是否有参数需要必须写上——以腾讯天气为例:

3 上面图里的参数为强制要求 其类型和说明也为大家准备了

4 下面开始书写代码

代码一共分为两部分:1 jsonp方式获取数据 2 渲染页面(我这里使用的是模板引擎)

4.1 先引入我的文件

我这里用的jq 因为方便

4.2 准备好相应的html骨架 我这里使用bootstrap的插件 大家可以自己书写

注意:tbody里面的我是注释没有删除 因为后面使用模板引擎会复制

4.3 开始书写自己的js样式 我这里是使用的外联式 

注意:标准书写是需要书写入口函数

这里的请求方式我省略了 因为jsonp只能适用于get请求 不写默认就是get

 4.4 开始使用模板引擎

4.4.1 这里是骨架的书写 注意书写格式 书写完最好使用插件格式化一下

 这里为整个js过程 其中我们给时间设置了过滤器 因为这里时间为字符串 所以为了美观和使用效果 我采用的是拼接字符串

 5 最后再对代码进行修改和完善 是样式格式更标准化 

改变:

1 data改变了 我们采用了键值对的方式追加再url后面这里有注意格式先?后面多个值采用&分隔

2 拼接改变了 我们采用了最新的模板字符串的方式 优化了性能

3 截取字母改变了 其目的也是为了提高运行速率

 感兴趣的可以去查阅更多资料 谢谢大家

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
是的,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('服务器已启动'); }); ``` 需要注意的是,代理页面需要在服务器端进行处理,并且需要考虑数据安全性的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值