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);
      }
    });
  };

});

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

赞 (0)

相关推荐

  • 对Jquery中的ajax再封装,简化操作示例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>jQueryAja

  • jQuery Ajax 全局调用封装实例代码详解

    有一种情况:全站都要用异步方式来调用 数据,提交数据,那么你每次操作 都会要$.ajax({.....}) 写重复的方法 和代码,冗余太大, 也浪费时间,虽说你有代码自动提示补全,但真的不优雅,身为前端极客,是不能允许的! [嘿嘿!虽说我现在基本不用jquery了 ,不过异步概念 是永远要用的,就帮助下新人] jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="/js/jquery.mi

  • 封装了jQuery的Ajax请求全局配置

    摘要: jQuery已经成为项目中最常见的js库,也是前端开发最喜欢使用的库.下面是在项目中封装了jQuery的Ajax,分享给大家. 代码: 复制代码 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {     var url = opt.url;     var href = location.href;     // 判断是否跨域请求     var requestType = 'jsonp';     if (url.indexOf

  • JQuery 封装 Ajax 常用方法(推荐)

    why easy-ajax easy-ajax是为了治理前端乱写Ajax方法而生.基于jquery封装一些常用方法,后期计划加入前端数据缓存功能. 使用方法如下: <script src="easy.ajax.js"></script> API: config配置项: config{ jqueryAjax默认配置外增加如下配置: mustCallback:强制回调(很多情况请求失败后直接在Ajax中提示后端返回的错误信息就结束了,不会进入回调函数,但很难避免失败

  • 原生js仿jquery实现对Ajax的封装

    前言 与js相比,jquery为我们省去了冗长的获取元素的代码,不用考虑一些麻烦的兼容问题,更加方便的动画实现,以及更加方便的方法调用让我们觉得jquery真是越用越舒服.但是jquery说到底还是对js的封装,我们不光要用的舒服还要深入理解其中的原理,这样才能更好的使用它. 首先我们封装的函数为了能实现可传入无限多个参数,在使用我们即将封装的函数时,需要使用对象进行传参,形式如下: //data作为参数传入我们下面封装的函数 var data = { //数据 user:"yonghu1&qu

  • 基于jQuery的ajax方法封装

    ajax (ajax开发)简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在实际的项目里,ajax的应用频率很高

  • 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

    对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或其它参数.同时在工作中,我们还会发现,有一些ajax请求的数据,对实时性要求不高,即使我们把第一次请求到的这些数据缓存起来,然后当相同请求再次发起时直接拿之前缓存的数据返回也不会对相关功能有影响,通过这种手工的缓存控制,减少了ajax请求,多多少少也能帮助我们提高网页的性能.本文介绍我自己关于这两方

  • jQuery版AJAX简易封装代码

    开发过程中,AJAX的应用应该说非常频繁,当然,jQuery的AJAX函数已经非常好用,但是小编还是稍微整理下,方便不同需求下,可以简化输入参数,下面是实例代码: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1} * async 默认值: true.默认设置下,所有请求均为异步请求.如果需要发送同步请求

  • jquery 全局AJAX事件使用代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery Ajax - AjaxEvent</title> <script src="../jquery-1.4.3.js" type="text/javascript"></script> <script type="

  • jquery的ajax简单结构示例代码

    复制代码 代码如下: $.ajax({ type: "POST", url:url, async:false, data: param, contentType:"json", success:function(date){ if(date.success){ } }, error:function(date){ } });

  • asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码

    首先贴上Jquery的ajax: 复制代码 代码如下: $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type: 'POST', contentType: 'application/json;charset=utf-8', dataType: 'json', data: '{ PpareId:"' + varlue + '"}', success: function (data) { var dataObj = eval("(&q

  • js锁屏解屏通过对$.ajax进行封装实现

    jquery插件源码: /** * 对jquery中$.ajax进行封装,以便加入锁屏功能 * isAsync 是否为异步请求,默认为true * isLock 是否锁屏,默认是true * isCache 是否从浏览器缓存中加载信息,默认是fasle ***/ ;(function($) { $.fn.doPost = function(settings) { settings = jQuery.extend({ isAsync:true, type : "post", url :

  • 利用jQuery中的ajax分页实现代码

    本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下 把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp 本人封装后,使用者需要在页面中引入page_ajax.jsp,并且在查询列表的时候,点击按钮,调用自定义的方法,如myFunction(),在这个方法里头,调用自己拓展的jquer方法,$.pageAjax(url,functionName,showDIv); 这里的url是你要请求的ajax

  • Django中使用jquery的ajax进行数据交互的实例代码

    Django中使用jquery的ajax进行数据交互的实例代码

    jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo

随机推荐