完整的jq ajax封装

2024-11-01

jQuery-实现简单的Ajax请求封装

封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,data,success,error){ if(type.toLowerCase()=='post'){ data = pack(data) } $.ajax({ type: type, url: base + url, contentType:'application/json', data:dat

关于jq ajax封装以及error的报错参数

jq的ajax完整版本 $.ajax({ url: "GetCityByPId.ashx", data: {pId:pid}, dataType: "JSON", type: "GET", cache:false, success: function (data) { for (var key in data) { var cityId = data[key].CityId; var cityName = data[key].CityName;

关于jq ajax封装以及ajax上传Webapi

jq的ajax完整版本 $(function () { fileChange(); }); function fileChange() { $('#fileinput').change(function () { ajaxUploadImg(); }); } function ajaxUploadImg() { var formData = new FormData($('#idcardA')[0]); $.ajax({ u

jq ajax封装

//ajax公共方法,zs 2017-06-14 $.extend({ //比jq的ajax多了的参数: //salert是否在请求成功后弹出后台的SuressStr字段值 //ealertStr:请求出错 majax: function (a) { if (typeof a === "object") { var defaultOption = { url: "", async: true, cache: true,//dataType 为 script 和 js

ajax请求原理及jquery $.ajax封装全解析

.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得请求数据.要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解. XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术.简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户.达到无刷新的效果. 所

原生Ajax 和Jq Ajax

前言:这次介绍的是利用ajax与后台进行数据交换的小例子,所以demo必须通过服务器来打开.服务器环境非常好搭建,从网上下载wamp或xampp,一步步安装就ok,然后再把写好的页面放在服务器中指定的位置.打开时,在浏览器地址栏输入"localhost/指定页面"或者"127.0.0.1/指定页面"打开. 下面列出demo的HTML.PHP.原生ajax .jq ajax代码. HTML代码: <!doctype html> <html> &

Javascript:来一个AJAX封装函数

前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有 jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法. 所以我也花一天时间写了一个,参数与调用方法类似

妹味6：ajax与ajax封装

(功能)ajax能且仅能从服务器读取文件 (环境)需要服务器环境才能测试,可以用工具建立本地服务器环境 (缓存)解决缓存问题:url加时间戳让每次请求地址唯一,如 url='abc.txt?t='+new Date().getTime(); (编码)请求的文件必须与网页的编码一致,否则乱码 (处理)eval()处理请求结果很方便,自动分割.但据说eval有很多问题,除了ajax中,其它地方暂时不要乱用. (实例)请求数据并在同一个块内显示.json数据处理.分页数据请求 ajax函

Ajax封装函数笔记

Ajax封装函数: function ajax(method, url, data, success) { //打开浏览器 //1.创建一个ajax对象 var xhr = null; try { xhr = new XMLHttpRequest(); //正常浏览器 } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); //兼容IE6以下 } //2.在地址栏输入地址,提交发送请求:open方法,send方法//open方法有三

原生ajax封装，包含post、method方式

原生ajax封装,包含post.method方式 function ajax(method, url, data, success) { var xhr = null; try { xhr = new XMLHttpRequest(); } catch (e) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //get时,且数据存在,URL需要用?连接 if (method == 'get' && data) { url += '?' +

Ajax工作原理和原生JS的ajax封装

前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌也会有尘埃落定的时候,但对ajax而言,似乎并不如此. 正文: 一,定义:Asynchronous JavaScript and XML,意思是异步JS和XML: 解释下异步,异步是相对于同步来说的,同步即同时进行(累积多了就排队,一个一个执行,必须等上一个结束,才能到下一个),而异步就是执行到我了

我的前端工具集（六）Ajax封装token

我的前端工具集(六)Ajax封装token liuyuhang原创,未经允许禁止转载在单点登陆中,或登陆验证后,不应该每次都验证用户名和密码, 也不应该将用户名密码存入cookie中(虽然很多都这么做) token作为一种验证策略,实现起来比较简单,也可以找一些单点登陆的框架,或者token解决方案. 本文工具使用REST风格,将ajax经过简单封装,使得所有使用此封装后的ajax都默认进行token验证. 1.封装的ajax代码 /** * 封装ajax代码 */ var local =

AJAX - 封装的传参改为传入对象 XML JSON 数据格式

Ajax封装函数,上次是直接传参,这次在原来的基础上改进,模仿jQuery 直接传入对象,把之前的参数都变为这个对象的属性. 这样可以随意调换传入数据的次序. 其他优点? 需要再复习一下. Ajax处理后台传的数据主要有下面几种: 1. 直接用PHP写的数据,缺点是比如数据中有字符,而切割字符时用的是同样的符号,就会导致出错. 2. XML 开头必须写 <?xml version="1.0" encoding="UTF-8" ?> 所有内容必须包裹在

简单的基于promise的ajax封装

基于promise的ajax封装 //调用方式: /* ajaxPrmomise({ url:, method:, headers:{} }).then(res=>{}) */ ;(function(window){ //设置默认的参数配置项 let _default = { url:'', baseURL:'', method:'GET', params:null, //get请求基于问号传参方式传递给服务器的内容 headers:{}, timeout:500, dataType:'json

ajax 封装（集中认证、错误、请求loading处理）

一.为什么要对 ajax 进行封装: (在使用antd pro 开发项目时,里面默认是把请求进行了封装的,放在 utils/request.js 中.使用起来非常方便 https://pro.ant.design/docs/server-cn ) 1.便于统一处理 POST,GET 等请求参数,请求头,以及错误提示信息等.甚至 loading处理 . 2.一个项目中请求头.错误处理.loading 处理一把都是一样的.封装之后,层次结构清晰:代码减少,且页面中的逻辑只要关心对应的逻

前后端数据交互(三)——ajax 封装及调用

有很多框架已经将 ajax 封装,需要的时候只需要调用就好,比如 jquery 是最常用的.我们为什么还需要学习 ajax 的封装呢?首先加强我们对ajax的认识,其次如果只是因为ajax请求需要引入框架,我们可以自己封装一个,这样就不需要引入多余的框架了. 一.封装的注意点封装是为了把相同的部分都实现公用,节省资源,提高代码复用性,工作效率也高,所以需要把不同的参数事件类型等通过调用的时候传入,需要注意点有: 1.1.传参发送 ajax 请求时,主要参数有: 请求url 请求类型请求参数

jq再次封装自己的ajax & js 回调函数 & js方法注释&js 全局屏蔽点击事件及a标签

1.封装成一个独立JS var commonUrl = 'http://xx.xxx.com/'; function http({ url, type = "post", dataType = "json", data = {}, success }) { $.ajax({ url: commonUrl + url, type, dataType, data, success: function (res) { success(res); } }) } 2.调用 v

JQ+AJAX实现多级联动

利用JQ与AJAX实现三级联动实现的效果: 当前两级改变时,后边一级或两级都会改变: 使用的数据库: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="jquery-1.11.2.min.js" typ

【笔记】关于jq $.ajax 函数 success回调函数不能赋正确值或返回正确值的问题

最近在一个项目里面打算实现如下功能: 当我注册账号的时候当输入账号完毕后输入框失焦时执行一个 ajax 请求,验证账号是否被注册,并未这个输入框的 isCorrect属性赋值,如果没有被注册 isCorrect属性值为“true”,否则为 “false”.代码如下: ajax: function(obj){ /* { elem: //验证的元素, hintsContent: //提示框元素, errorColor: //错误时显示的颜色, url: //后台处理页地址, reqData: //发

JS 实现AJAX封装（只限于异步）

1.AJAX 分为异步和同步请求比如你去买一个食品,但是商店暂时没有这个食品异步:等到商品有了再来买,这个期间我可以去做别的事: 同步:一直在这里等,什么时候商品来了,买到手了,再去做别的事; 下面我写了一个封装的函数,作为了解,使用的话建议使用JQ的AJAX function Ajaxget(option,fnSucc,fnFaild){ /*url 请求路径 getOrPost get还是post请求 str post发送的字符串 fnSucc 成功函数 fnFaild 失败函数

原生 Ajax 封装和 Axios 二次封装

AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允许JavaScript在浏览器上执行. 兼容性封装 XMLHttpRequest 对象 // 创建构造函数 function Ajax(obj) { this.url = obj.url ||''; this.type = obj.type || 'get'; this.data = obj.d

完整的jq ajax封装

热门专题