jQuery版AJAX简易封装代码

 更新时间:2016年09月14日 14:01:35   作者:靓仔小伙计  
这篇文章主要为大家详细介绍了jQuery版AJAX简易封装代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

开发过程中,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);
      }
    });
  };



});

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

相关文章

  • jQuery中live方法的重复绑定说明

    jQuery中live方法的重复绑定说明

    使用jQuery的live()方法绑定事件,有时会出现重复绑定的情况,如,当点击一个按钮时,此按钮所绑定的事件会并执行n遍
    2011-10-10
  • javascript 全角转换实现代码

    javascript 全角转换实现代码

    当客户端用户切换输入法至全角时可能您的表单提交会有漏洞哦!不过事实上js有这功能 可以将其转换为非全角字符!
    2009-07-07
  • jQuery回到顶部的代码

    jQuery回到顶部的代码

    在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果,非常不错,感兴趣的朋友可以参考下
    2016-07-07
  • jQuery操作select的实例代码

    jQuery操作select的实例代码

    jQuery操作select的实例代码,这篇比较简单,如果想要想了解更多可以参考脚本之家以前发布的文章
    2012-06-06
  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery控制元素显示、隐藏、切换、滑动的方法总结

    这篇文章主要介绍了jQuery控制元素显示、隐藏、切换、滑动的方法总结,本文讲解了hide()、show() 、slideDown、slideUp、 slideToggle、fadeIn()、fadeOut()、fadeTo()等方法使用实例,需要的朋友可以参考下
    2015-04-04
  • 基于jquery实现简单的分页控件

    基于jquery实现简单的分页控件

    这篇文章主要为大家详细介绍了基于jquery实现简单的分页控件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • jquery实现华丽的可折角广告代码

    jquery实现华丽的可折角广告代码

    这篇文章主要介绍了jquery实现华丽的可折角广告代码,涉及jquery鼠标hover事件动态操作页面元素样式的技巧,可用于页面增加广告的视觉效果,需要的朋友可以参考下
    2015-09-09
  • 浅谈原生JS实现jQuery的animate()动画示例

    浅谈原生JS实现jQuery的animate()动画示例

    本篇文章主要介绍了浅谈原生JS实现jQuery的animate()动画示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • jquery last-child 列表最后一项的样式

    jquery last-child 列表最后一项的样式

    发开中个人是比较喜欢用Repeater控件,特别是前台可老是遇到一个问题就是一个列表的最后一项总是和上面的样式不一样 如上面的都有下边框,最后一个就没有
    2010-01-01
  • JQuery实现绚丽的横向下拉菜单

    JQuery实现绚丽的横向下拉菜单

    以前经常看见网站有菜单的显示,鼠标移上去就出现下拉的效果,下面为大家介绍下,下面为大家介绍下JQuery实现的横向下拉菜单
    2013-12-12

最新评论