移动端qq音乐地址:https://m.y.qq.com/ .抓取QQ音乐数据

请求首页时,有如下链接,回调了jsonp

https://c.y.qq.com/splcloud/fcgi-bin/p.fcg?g_tk=1847183166&format=jsonp&jsonpCallback=jsonp1

真正xhr:

https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg?g_tk=1847183166&uin=1163898403&format=json&inCharset=utf-8&outCharset=utf-8&notice=0&platform=h5&needNewCode=1&_=1536239792110

浏览器可以打开的json数据

在记忆一下jsonp

jsonp是目前可以跨域的(基本上标签带有src属性的都是可以不受任何访问限制),且要动态生成script标签在ajax无法跨域的情况下可以使用jsonp进行请求

但它跟ajax是不一样的..jsonp利用url链接进行请求发送和调用回调函数(callblack)使用数据。


使用了 github:https://github.com/webmodules/jsonp 的插件,自定义一个封装的jsonp

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data) return new Promise((resolve, reject) => {
originJsonp(url, option, (err, data) => {
if (!err) {
resolve(data)
} else {
reject(err)
}
})
})
}
//url代表一个纯净的url地址
//data是其他参数,用于拼接到url上 export function param(data) {
let url = ''
for (var k in data) {
let value = data[k] !== undefined ? data[k] : ''
url += `&${k}=${encodeURIComponent(value)}` //es6语法
}
return url ? url.substring(1) : ''
}

对每个组件封装请求

import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config' export function getRecommend() {
const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg' const data = Object.assign({}, commonParams, {
platform: 'h5',
uin: 0,
needNewCode: 1
}) return jsonp(url, data, options)
}

这个url是真正xhr的地址

获取qq音乐json数据---某课网音乐app学习的更多相关文章

  1. Jquery Ajax和getJSON获取后台普通Json数据和层级Json数据解析

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JSONProxy - 获取跨域json数据工具

    JSONProxy是一款很好的获取json数据的代理网站,“Enables cross-domain requests to any JSON API”.当你苦于无法跨域获取json数据时,不妨一试, ...

  3. 获取 request 中 json 数据

    import java.io.IOException; import javax.servlet.http.HttpServletRequest; /** * request 对象的相关操作 * @a ...

  4. android 获取http请求json数据

    package com.my.gethttpjsondata; import java.io.BufferedReader;import java.io.ByteArrayOutputStream;i ...

  5. Ajax在静态页面中向指定url发送json请求获取返回的json数据

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. jQuery AJAX获取JSON数据解析多种方式示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. pyhton 从web获取json数据 保存到本地然后再读取

    从web中获取json数据直接进行处理总认为太慢.主要是从web中获取获取数据的过程有点慢. 所以就在想 假设先利用空暇时间把json数据获取并保存到本地,然后再从本地文件里读取和操作.应该就要快非常 ...

  8. jquery zTree插件 json 数据详解

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 关于jqGrig如何写自定义格式化函数将JSON数据的字符串转换为表格各个列的值

    首先介绍一下jqGrid是一个jQuery的一个表格框架,现在有一个需求就是将数据库表的数据拿出来显示出来,分别有id,name,details三个字段,其中难点就是details字段,它的数据是这样 ...

随机推荐

  1. tomcat上传图片失败

    今天,突然遇到个奇怪的问题,tomcat上传图片时好时坏,经查线上四台服务有一台服务器硬盘满了. 解决一下硬盘空间的问题,有好使了,那么图片上传通过流写到远程对象存储服务中,并没有落盘和硬盘满有哪些关 ...

  2. Ubuntu 16.04错误:The update information is outdated this may be caused by network...的问题解决

    说明:这个问题没有最终的解决方案,只有不断的尝试. 错误: The update information is outdated this may be caused by network probl ...

  3. 深入解析Microsoft Sql server 2008

    http://blog.csdn.net/downmoon/article/details/5256548

  4. Workflow:添加工作流存储功能

    数据库准备: 1. 创建database(这里我们用的是MSSQL.Workflow支持其它数据库,但是MSSQL是配置最方便,不要问我为什么!). 2. 运行位于[%WINDIR%\Microsof ...

  5. Weblogic补丁升级操作手冊

    1.查看Weblogic版本号 方法一 [weblogic@Weblogic201 ~]$ cd /home/weblogic/Oracle/Middleware/wlserver_10.3/serv ...

  6. linux系统下安装R

    一.先通过ssh将R安装包R-3.2.2.tar.gz从本机复制到你的linux虚拟机上的/home下: 二.解压安装包 #tar -zxvf R-3.2.2.tar.gz 三.1).进入到解压后的R ...

  7. 1. 少了一个PermMissingElem Find the missing element in a given permutation.

    少了一个: package com.code; import java.util.Arrays; public class Test03_2 { public static int solution( ...

  8. PL/SQL个人学习笔记

    资料1 -- Created on 2014/8/20  declare    -- Local variables here   i integer; begin   i := 12;   -- T ...

  9. jquery动态创建form表单

    function exportExcel() { var merchantName = $('#merchantName').val(); var merchantNo = $('#merchantN ...

  10. WAMP 2.5 &quot;FORBIDDEN&quot; error

    对于web开发人员来说.远程訪问站点能够非常方便的提高开发站点开发效率,那么在wamp环境下,默认仅仅支持本地訪问,那么怎样訪问开启远程站点訪问呢? 开启方法: wamp2.5(32bit) 集成环境 ...