码迷,mamicode.com
首页 > Web开发 > 详细

jsonp 代码优化

时间:2020-06-15 17:21:39      阅读:88      评论:0      收藏:0      [点我收藏+]

标签:options   函数   拼接字符串   local   jsonp   ams   com   nload   dom   

技术图片

 

 

 

技术图片

 

 

 

技术图片

 

 

技术图片

 

 

改进以后

  技术图片

 

 

技术图片

 

 

 

 

技术图片

 

 

 

<script type="text/javascript">
        // 获取按钮
        var btn1 = document.getElementById(‘btn1‘);
        var btn2 = document.getElementById(‘btn2‘);
        // 为按钮添加点击事件
        btn1.onclick = function () {
            jsonp({
                // 请求地址
                url: ‘http://localhost:3001/better‘,
                data: {
                    name: ‘lisi‘,
                    age: 30
                },
                success: function (data) {
                    console.log(123)
                    console.log(data)
                }
            })
        }

        btn2.onclick = function () {
            jsonp({
                // 请求地址
                url: ‘http://localhost:3001/better‘,
                success: function (data) {
                    console.log(456789)
                    console.log(data)
                }
            })
        }

        function jsonp (options) {
            // 动态创建script标签
            var script = document.createElement(‘script‘);
            // 拼接字符串的变量
            var params = ‘‘;

            for (var attr in options.data) {
                params += ‘&‘ + attr + ‘=‘ + options.data[attr];
            }
            
            // myJsonp0124741
            var fnName = ‘myJsonp‘ + Math.random().toString().replace(‘.‘, ‘‘);
            // 它已经不是一个全局函数了
            // 我们要想办法将它变成全局函数
            window[fnName] = options.success;
            // 为script标签添加src属性
            script.src = options.url + ‘?callback=‘ + fnName + params;
            // 将script标签追加到页面中
            document.body.appendChild(script);
            // 为script标签添加onload事件
            script.onload = function () {
                document.body.removeChild(script);
            }
        }

        
    </script>

 

jsonp 代码优化

标签:options   函数   拼接字符串   local   jsonp   ams   com   nload   dom   

原文地址:https://www.cnblogs.com/ericblog1992/p/13132017.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!