當前位置：
首頁 >
跨域 （1） jsonp 跨域
發布時間：2025/4/14
48
豆豆
生活随笔
收集整理的這篇文章主要介紹了
跨域 （1） jsonp 跨域
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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: "雙色球開獎結果" // 1: "sk-ll" // 2: "雙色球" // 3: "圣墟" // 4: "switch" // 5: "順豐快遞單號查詢" // 6: "神級龍衛" // 7: "沈浪與蘇若雪最新章節更新" // 8: "申通快遞單號查詢" // 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}) {//返回一個promise 的目的是 為了 下面的 then 函數返回數據return new Promise((resolve,reject)=>{//創建script let script = document.createElement('script');// 聲明方法window[cb]= function (data) {resolve(data);//得到數據移除script 標簽 document.body.remove(script)}//合并參數params = {...params,cb};let arrs = [];//遍歷數組 將 wd=S ，cb=succ 以這種形式添加到數組中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) ["雙色球開獎結果", "sk-ll", "雙色球", "圣墟", "switch", "順豐快遞單號查詢", "神級龍衛", "沈浪與蘇若雪最新章節更新", "申通快遞單號查詢", "soul"]// __proto__: Object })</script> </body> </html>輸出：
?
?
jsonp 只能處理get? 請求?
轉載于:https://www.cnblogs.com/guangzhou11/p/11618259.html
總結
以上是生活随笔為你收集整理的跨域 （1） jsonp 跨域的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： element-ui + redis +
- 下一篇： 编程入门教程