用原生JavaScript实现jQuery的$.getJSON的解决方法


Posted in Javascript onMay 03, 2013

今天在写一DEMO,其中用到了jQuery的$.getJSON方法,写完后发现整个DEMO中用到jQuery中的就这一个地方,但要引入一个jQuery实在不划算,于是就自己实现了一个简单版的,基本可以满足需求,现分享出来:

var $ = {
    getJSON: function(url, params, callbackFuncName, callback){
        var paramsUrl ="",
            jsonp = this.getQueryString(url)[callbackFuncName];
        for(var key in params){
            paramsUrl+="&"+key+"="+encodeURIComponent(params[key]);
        }
        url+=paramsUrl;
        window[jsonp] = function(data) {
            window[jsonp] = undefined;
            try {
                delete window[jsonp];
            } catch(e) {}
            if (head) {
                head.removeChild(script);
            }
            callback(data);
        };
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.charset = "UTF-8";
        script.src = url;
        head.appendChild(script);
        return true;
    },
    getQueryString: function(url) {
        var result = {}, queryString = (url && url.indexOf("?")!=-1 && url.split("?")[1]) || location.search.substring(1),
            re = /([^&=]+)=([^&]*)/g, m;
        while (m = re.exec(queryString)) {
            result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
        }
        return result;
    }
};

调用DEMO如下:

var url = "http://xxx.xxx.xxx?callback=jsonp123";
var params = {
    a:1,
    b:2
};
$.getJSON(url, params, "callback", function(data){
    //todo
});

Javascript 相关文章推荐
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
Apr 20 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
js函数排序的实例代码
Jul 01 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
微信小程序开发(一):服务器获取数据列表渲染操作示例
Jun 01 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
js中延迟加载和预加载的具体使用
Jan 14 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 #Javascript
JS动态获取当前时间,并写到特定的区域
May 03 #Javascript
JS实现商品倒计时实现代码
May 03 #Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 #Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
May 03 #Javascript
javascript两种function的定义介绍及区别说明
May 02 #Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 #Javascript
You might like
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
js简单设置与使用cookie的方法
2016/01/22 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
利用babel将es6语法转es5的简单示例
2017/12/01 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
python利用OpenCV2实现人脸检测
2020/04/16 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
对Python中plt的画图函数详解
2018/11/07 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
机器学习实战之knn算法pandas
2019/06/22 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python和Sublime整合过程图示
2019/12/25 Python
完美解决keras保存好的model不能成功加载问题
2020/06/11 Python
基于python实现坦克大战游戏
2020/10/27 Python
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
政风行风整改方案
2014/10/25 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
2016年寒假家长评语
2015/10/10 职场文书