用原生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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
jQuery中:disabled选择器用法实例
Jan 04 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
vue实现列表拖拽排序的功能
Nov 02 Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 Javascript
如何实现vue的tree组件
Dec 03 Vue.js
基于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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
Centos下升级php5.2到php5.4全记录(编译安装)
2015/04/03 PHP
浅谈PHP封装CURL
2019/03/06 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
HTTP头隐藏PHP版本号实现过程解析
2020/12/09 PHP
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
JS与C#编码解码
2013/12/03 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
详解用Pytest+Allure生成漂亮的HTML图形化测试报告
2020/03/31 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
我的网上商城创业计划书
2013/12/26 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
优秀党员先进材料
2014/12/18 职场文书
清洁工工作总结
2015/08/11 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server
python获取淘宝服务器时间的代码示例
2021/04/22 Python
Windows中Redis安装配置流程并实现远程访问功能
2021/06/07 Redis