jQuery版AJAX简易封装代码


Posted in Javascript onSeptember 14, 2016

开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码:

$(function(){
  /**
   * ajax封装
   * url 发送请求的地址
   * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
   * async 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
   *    注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
   * type 请求方式("POST" 或 "GET"), 默认为 "GET"
   * dataType 预期服务器返回的数据类型,常用的如:xml、html、json、text
   * successfn 成功回调函数
   * errorfn 失败回调函数
   */
  jQuery.syncAjax=function(url, data, async, type, dataType, successfn, errorfn) {
    async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
    type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
    dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: type,
      async: async,
      data: data,
      url: url,
      dataType: dataType,
      success: function(d){
        successfn(d);
      },
      error: function(e){
        errorfn(e);
      }
    });
  };
  
  /**
   * ajax封装
   * url 发送请求的地址
   * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
   * successfn 成功回调函数
   */
  jQuery.jsonAjax=function(url, data, successfn) {
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: "post",
      data: data,
      url: url,
      dataType: "json",
      success: function(d){
        successfn(d);
      }
    });
  };
  
  /**
   * ajax封装
   * url 发送请求的地址
   * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
   * dataType 预期服务器返回的数据类型,常用的如:xml、html、json、text
   * successfn 成功回调函数
   * errorfn 失败回调函数
   */
  jQuery.jsonAjax2=function(url, data, successfn, errorfn) {
    data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
    $.ajax({
      type: "post",
      data: data,
      url: url,
      dataType: "json",
      success: function(d){
        successfn(d);
      },
      error: function(e){
        errorfn(e);
      }
    });
  };



});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用javascipt---实现二分查找法
Apr 10 Javascript
字符串反转_JavaScript
Apr 28 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
原生JS实现首页进度加载动画
Sep 14 #Javascript
jquery判断iPhone、Android设备类型
Sep 14 #Javascript
Angularjs 实现分页功能及示例代码
Sep 14 #Javascript
Angularjs CURD 详解及实例代码
Sep 14 #Javascript
Angular Module声明和获取重载实例代码
Sep 14 #Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
Sep 14 #Javascript
Angular 应用技巧总结
Sep 14 #Javascript
You might like
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
Jquery给基本控件的取值、赋值示例
2014/05/23 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
跟老齐学Python之print详解
2014/09/28 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
Python温度转换实例分析
2018/01/17 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python列表元素常见操作简单示例
2019/10/25 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
2019/04/23 HTML / CSS
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
教师应聘个人求职信
2013/12/10 职场文书
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
文秘个人求职信范文
2014/04/22 职场文书
校园安全广播稿范文
2014/09/25 职场文书
运动会广播稿200米(5篇)
2014/10/15 职场文书
小学生反邪教心得体会
2016/01/15 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python