在前端异步获取数据时候每次都是使用 ajax;为了通用性更好,然而封装通用的 ajax 是一个一劳永逸的办法。

本次基于 jQuery 封装实现;

第一步: 引入 jQuery:

<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>

第二步:实现代码:

// 该封装基于 jQuery

var sendAjax = function(method, url, data, successfn, errorfn) {
$.ajax({
type: method,
url: url,
data: data,
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
} // 注意:
// 1.1 data 数据格式根据需求处理
// 1.2 successfn 和 errorfn 根据需要自行定义 // 例如: var __main = function() {
// 请求方法
var method = 'GET' // 请求地址
var url = 'main/test' // 数据格式处理
var datas = {name: 'zhangsan', age: '25'}
var data = JSON.stringify(datas) // 成功调用函数
var demoSuccessfn = function(testSuccess) {
if(testSuccess === 'success') {
console.log('success')
} else {
console.log('reponse have some question.')
}
} // 失败调用函数
var demoErrorfn = function(testError) {
if(testError === 'error') {
console.log('error')
} else {
console.log('have error information.')
}
} // 实现调用 sendAjax(method, url, data, successfn, errorfn)
}

封装通用的 ajax, 基于 jQuery。的更多相关文章

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

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

  2. 基于jQuery封装的分页组件(可自定义设置)

    jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...

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

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

  4. 基于Jquery+Ajax+Json+高效分页

    摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

  5. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  6. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  7. 基于Jquery+Ajax+Json+存储过程 高效分页

    在做后台开发中,都会有大量的列表展示,下面给大家给大家分享一套基于Jquery+Ajax+Json+存储过程高效分页列表,只需要传递几个参数即可.当然代码也有改进的地方,如果大家有更好的方法,愿留下宝 ...

  8. 基于jQuery实现的Ajax 验证用户名唯一性

    基于jQuery实现的Ajax 验证用户名唯一性 前端jsp页面代码 <tr> <th><span class="requiredField"> ...

  9. 基于jquery ajax的多文件上传进度条

    效果图 前端代码,基于jquery <!DOCTYPE html> <html> <head> <title>主页</title> < ...

随机推荐

  1. vue组件事件(极客时间Vue视频笔记)

    vue组件核心:事件 <body> <div class="app"> <todo-list></todo-list> {{mess ...

  2. [转帖]OEM、ODM、OBM分别是什么?

    OEM.ODM.OBM分别是什么? https://blog.csdn.net/liangtianmeng/article/details/83215500 感觉很多地方说明的都不对 OEM 别人的产 ...

  3. Python win32com模块 合并文件夹内多个docx文件为一个docx

    Python win32com模块 合并文件夹内多个docx文件为一个docx #!/usr/bin/env python # -*- coding: utf-8 -*- from win32com. ...

  4. Python 实用脚本

    Python 实用脚本 脚本写的好,下班下得早!程序员的日常工作除了编写程序代码,还不可避免地需要处理相关的测试和验证工作. 例如,访问某个网站一直不通,需要确定此地址是否可访问,服务器返回什么,进而 ...

  5. Java中实现多态的条件是什么

    java中实现多态需要三个条件: 1,需要有继承关系的存在. 2,需要有方法的重写. 3,需要有父类的引用指向子类对象.

  6. react 错误处理

    https://www.jianshu.com/p/61d09e488743 https://codepen.io/sgroff04/pen/dVbgJy/

  7. PowerEdge T630服务器安装机器学习环境(Ubuntu18.04、Nvidia 1080Ti驱动、CUDA及CUDNN安装)

    安装步骤 在开始安装之前,我要说明一下,这个Ubuntu18.04系统的安装,使用的连接线(就是服务器和电脑显示器的连接线)必须两头都是VGA连接线,不能使用VGA转HDMI连接线,也不能用DVI转D ...

  8. Spring基础09——Bean的自动装配

    1.XML配置的Bean自动装配 SpringIOC容器可以自动装配Bean,需要做的仅仅是在<bean>的autowire属性里指定自动装配的模式,而不需要手工去指定要装配的Bean,a ...

  9. Cookie、Session和Django分页

    cookie Cookie的由来 大家都知道HTTP协议是无状态的. 无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系,它不会受前面的请求响应情况直接影响,也不 ...

  10. 十一、Boostrap-X-editable

    一.官网 http://vitalets.github.io/x-editable/index.html 二.实践 在jQuery中ajax配置项中的使用type与method的区别: type 和m ...