<!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>jquery ajax封装</title>

     <script src="jquery.min.js"></script>

 </head>

 <body>

     <script>

     $(function() {

         /**

          * ajax封装

          * url 发送请求的地址

          * data 发送到服务器的数据，数组存储，如：{"username": "张三", "password": 123456}

          * succCallback 成功回调函数

          * errorCallback 失败回调函数

          * type 请求方式("POST" 或 "GET")， 默认已经设置为 "POST"

          * dataType 预期服务器返回的数据类型，常用的如：xml、html、json、text

          * reference jquery-1.7.1.js

          */

         //插入loading

         /*var html = "";

         html += '<div class="js_loading">';

         html += '<div class="mask"></div>';

         html += '<div class="loading">';

         html += '<span><img src="loading.gif"></span>';

         html += '</div>';

         html += '</div>';

         $("body").append(html);*/

         function $ajax(url, postData, succCallback, errorCallback, type, dataType) {

             var type = type || "post";

             var dataType = dataType || "json";

             $.ajax({

                 type: type,

                 url: url,

                 data: postData,

                 dataType: dataType,

                 beforeSend: function() { //开始loading

                     //$(".js_loading").show();

                 },

                 success: function(res) {

                     /*if (res.success) {

                         if (succCallback) {

                             succCallback(res);

                         }

                     } else {

                         if (errorCallback) {

                             errorCallback(res);

                         }

                     }*/

                 },

                 complete: function() { //结束loading

                     //$(".js_loading").remove();

                     //$(".js_loading").hide();

                 }

             });

         }

         var postData = { moduleId: "fb750e3c-808f-4497-bf4a-f6bf6726a66e" } || {};

         //console.log(postData);

         /*$ajax("http://localhost:6688/AuthorizeManage/ModuleColumn/GetColModel", postData, function(res) {

             console.log(res);

         }, function(res) {

         }, "GET");*/

     });

     </script>

 </body>

 </html>

封装jquery的ajax的更多相关文章

  1. 使用es6的then()方法封装jquery的ajax请求

    使用场景: jsp页面中使用jquery的ajax请求比较频繁,以前vue框架的项目用过axios,所以就想着用then()封装一个公共请求的方法,这样每次请求就不用那么麻烦的写一大堆请求参数了. 示 ...

  2. 用Promise对象封装JQuery的AJAX过程

    let jqPostAjaxPromise = function(param){ return new Promise(function(resolve, reject){ $.ajax({ url: ...

  3. 对jquery的ajax进行二次封装以及ajax缓存代理组件：AjaxCache

    虽然jquery的较新的api已经很好用了, 但是在实际工作还是有做二次封装的必要,好处有:1,二次封装后的API更加简洁,更符合个人的使用习惯:2,可以对ajax操作做一些统一处理,比如追加随机数或 ...

  4. jQuery版AJAX简易封装

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

  5. 对jquery的ajax进行二次封装

    第一种方法: $(function(){ /** * ajax封装 * url 发送请求的地址 * data 发送到服务器的数据,数组存储,如:{"username": " ...

  6. 基于jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

  7. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  8. 不借助jquery封装好的ajax，你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

  9. jQuery的ajax对WebApi和OData的封装

    基于jQuery的ajax对WebApi和OData的封装 WebApi 的使用带来了一个显著的特点,对type有一定的要求.一般ajax的type无非就是两种,GET和POST.如果用JSONP来跨 ...

随机推荐

  1. JDK&JRE

    JDK是提供给Java开发人员使用的,其中包含了java的开发工具,也包括了JRE.所以安装了JDK,就不用在单独安装JRE了. 其中的开发工具:编译工具(javac.exe) 打包工具(jar.ex ...

  2. 【转载】 自动化机器学习（AutoML）之自动贝叶斯调参

    原文地址: https://blog.csdn.net/linxid/article/details/81189154 ---------------------------------------- ...

  3. 阶段5 3.微服务项目【学成在线】_day18 用户授权_11-前端集成认证授权-身份校验

    把下面赋值到nginx中 前端的服务需要配置一下 重启nginx 启动教学管理的前端 没有登陆直接就进来教学管理的后端了 下面我们要做的就是这两件事 1.前端页面校验用户的身份,如果用户没有登录则跳转 ...

  4. 无缝轮播 css3

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. oracle-复制表结构和表数据

    1.复制表结构和表数据 create table table_new as select * from table_old 2.复制表结构 create table table_new as sele ...

  6. maven仓库里如何搜索三方包？查看流行软件

    问题 这个仓库提供了搜索,但是功能比较弱,不支持groupid/artfactid的联合搜索 https://mvnrepository.com/ 解决 直接在搜索的url里添加groupid和art ...

  7. maven项目创建.m2文件夹

    创建为.m2.,m2前后都要有点,然后去掉后面的点 settings.xml文件如下: <?xml version="1.0" encoding="UTF-8&qu ...

  8. 逆天的flexbox布局

    Flexbox是spankin新推出的一种CSS布局模块,拥有完美的浏览器兼容性!它可以轻易做到垂直居中.重新排序.布局的动态伸展与收缩. Flexbox兼容性参考 点击查看基本教程介绍(请用电脑上的 ...

  9. 可能是一篇（抄来的）min25学习笔记

    可能是一篇(抄来的)min25学习笔记 一个要求很多的积性函数 我们考虑有一个积性函数,这个函数满足可以快速计算质数处的值 且质数可以写成一个多项式的形式--而且这个多项式如果强行套在合数上,满足积性 ...

  10. 将 MathType 公式转换为 Word 自带公式

    以下操作是基于Office 365以及MathType 6.9b平台.有网友留言说第四步没出现「转换为 Office Math」选项,这个我就不清楚了,难道是只有Office 365才支持? 打开Ma ...