当前位置: 首页 > 编程笔记 >

jQuery版AJAX简易封装代码

宋耀
2023-03-14
本文向大家介绍jQuery版AJAX简易封装代码,包括了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);
      }
    });
  };



});

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

 类似资料:
  • 前言 学会了 Ajax 的请求以及如何处理服务端的响应。这一章节,我们着重来封装一个简单的 Ajax。 前置知识: 本章节会使用部分 ES6 语法 本章节使用 Promise 简单需求: 支持 Promise 语法处理结果 支持自定义配置,包括 headers 内置 url、params、 data、headers 处理 1. 构造一个这样的 xhr function xhr(config) {

  • 本文向大家介绍jQuery EasyUI封装简化操作,包括了jQuery EasyUI封装简化操作的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家封装了Jquery EasyUI简化操作,供大家参考,具体内容如下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍基于jQuery的ajax方法封装,包括了基于jQuery的ajax方法封装的使用技巧和注意事项,需要的朋友参考一下 ajax (ajax开发)简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

  • 本文向大家介绍jQuery弹出框代码封装DialogHelper,包括了jQuery弹出框代码封装DialogHelper的使用技巧和注意事项,需要的朋友参考一下 看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙。思路对

  • 本文向大家介绍用原生JS对AJAX做简单封装的实例代码,包括了用原生JS对AJAX做简单封装的实例代码的使用技巧和注意事项,需要的朋友参考一下 首先,我们需要xhr对象。这对我们来说不难,封装成一个函数。 然后,我们来写核心函数。 最后,说明一下此函数的用法。 以上这篇用原生JS对AJAX做简单封装的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍原生AJAX封装的简单实现,包括了原生AJAX封装的简单实现的使用技巧和注意事项,需要的朋友参考一下 回归下原生js,网上看到的AJAX封装,遂拿来改改,不知还有何弊端,望指出! 假设一个需求,后端要求传入两个数字n1、n2,然后返回总和。 当其中一个参数为空或者不是数字时,返回:{"status":"0", "msg":"参数有误!"} 当正确的时候,返回:{"status":"1