简易版手写JSONP

最新推荐文章于 2022-06-13 16:28:58 发布

双击空格001

最新推荐文章于 2022-06-13 16:28:58 发布

阅读量337

点赞数

分类专栏：复习 ES6

本文链接：https://blog.csdn.net/weixin_42815873/article/details/123007644

版权

javascript 前端

复习同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

ES6

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  function JSONP({
    url,
    params,
    callbackKey,
    callback
  }) {
    const callbackName = 'callbackFunction';

    // 在参数里制定 callback 的名字
    params = params || {}
    params[callbackKey] = callbackName
    // 预留 callback
    window[callbackName] = callback
    // 拼接参数字符串
    const paramKeys = Object.keys(params)
    const paramString = paramKeys
      .map(key => `${key}=${params[key]}`)
      .join('&')
    // 插入 DOM 元素
    const script = document.createElement('script')
    script.setAttribute('src', `${url}?${paramString}`)
    console.log(script.src)
    document.body.appendChild(script)
  }

  JSONP({
    url: 'https://www.runoob.com/try/ajax/jsonp.php',
    params: {
      id: '2'
    },
    callbackKey: 'jsoncallback',
    callback(result) {
      console.log(result)
    }
  })
</script>

</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

双击空格001

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简易版手写JSONP

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l
复制链接

扫一扫