跨域 （1） jsonp 跨域
生活随笔
收集整理的這篇文章主要介紹了
跨域 （1） jsonp 跨域
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
jsonp 的例子
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>jsonp 跨域</title> </head> <body><script>function succ(data) {console.log(data) //Object // p: false // q: "s" // s: Array(10) // 0: "雙色球開(kāi)獎(jiǎng)結(jié)果" // 1: "sk-ll" // 2: "雙色球" // 3: "圣墟" // 4: "switch" // 5: "順豐快遞單號(hào)查詢" // 6: "神級(jí)龍衛(wèi)" // 7: "沈浪與蘇若雪最新章節(jié)更新" // 8: "申通快遞單號(hào)查詢" // 9: "soul" // length: 10 // __proto__: Array(0) // __proto__: Object }</script><script src="http://suggestion.baidu.com/su?wd=S&p=3&cb=succ&from=superpage"></script> </body> </html>jsonp? 的原理：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><script>function jsonp({url,params,cb}) {//返回一個(gè)promise 的目的是 為了 下面的 then 函數(shù)返回?cái)?shù)據(jù)return new Promise((resolve,reject)=>{//創(chuàng)建script let script = document.createElement('script');// 聲明方法window[cb]= function (data) {resolve(data);//得到數(shù)據(jù)移除script 標(biāo)簽 document.body.remove(script)}//合并參數(shù)params = {...params,cb};let arrs = [];//遍歷數(shù)組 將 wd=S ，cb=succ 以這種形式添加到數(shù)組中for(let key in params ) {arrs.push(`${key}=${params[key]}`)}//鏈接script script.src = `${url}?${arrs.join('&')}`;//添加到body 中 document.body.appendChild(script)})}jsonp({url:'http://suggestion.baidu.com/su?wd=S&cb=succ',params:{wd:'b'},cb:'succ'}).then(data=>{console.log(data);// {q: "s", p: false, s: Array(10)}// p: false// q: "s"// s: (10) ["雙色球開(kāi)獎(jiǎng)結(jié)果", "sk-ll", "雙色球", "圣墟", "switch", "順豐快遞單號(hào)查詢", "神級(jí)龍衛(wèi)", "沈浪與蘇若雪最新章節(jié)更新", "申通快遞單號(hào)查詢", "soul"]// __proto__: Object })</script> </body> </html>輸出：
?
?
jsonp 只能處理get? 請(qǐng)求?
轉(zhuǎn)載于:https://www.cnblogs.com/guangzhou11/p/11618259.html
總結(jié)
以上是生活随笔為你收集整理的跨域 （1） jsonp 跨域的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： element-ui + redis +
- 下一篇： 跨域 （3） window.name