ajax的封装——jq简化版
最近在复习ajax的知识,练习了下ajax的封装,此处做下笔记
废话不多说,直接代码
//发请求
//此处的url为请求地址,type为请求方式,success为请求成功的回调函数
myaxios({
url: 'http://127.0.0.1:8080/doRegister',
type: 'post',
data: {
userName: '狗子',
password: '12323',
phone: '12154545',
},
success:function(res) {
console.log(res)
}
})
function myaxios(config={}) { //将值以一个兑现的方式传入
const {
url,
type,
data,
success
} = config
let xhr = new XMLHttpRequest();
//由于get方法与post方法数据请求的方式不同,需要做下处理
let arr = []
if (type.toLowerCase === 'get') {
for (let key in data) {
arr.push(`${key}=${data[key]}`)
}
//需要装化为 键=值&键=值的方式
url = url + '?' + arr.join('&')
}
xhr.open(type, url);
//请求方式若为post
if (type.toLowerCase === 'post') {
for (let key in data) {
arr.push(`${key}=${data[key]}`)
}
//设置请球头,使其以键值对的方式传输数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 然后发送请求
xhr.send(data);
} else {
xhr.send();
}
xhr.onreadystatechange = function () {
if (xhr.status === 200 && xhr.readyState === 4) {
//console.log(xhr.responseText)
if (xhr.getResponseHeader('Content-Type').indexOf('json') !== -1) {
// 证明 content-type 这个响应头里面包含 json ,证明返回的就是json格式字符串
response = JSON.parse(xhr.responseText);
success(response)
}
}
}
}
ajax的封装——jq简化版的更多相关文章
- JQ中的Ajax的封装
1.认识JQ中ajax的封装 jQ 对于ajax的封装有两层实现:$.ajax 为底层封装实现:基于 $.ajax ,分别实现了$.get 与$.post 的高层封装实现: 2.Ajax的底 ...
- AJAX(JS&&JQ&&H5)
一 AJAX的简介: AJAX是"Asynchronous Javascript And XML"(异步JavaScript和XML),通过后台与服务器实现少量的数据交换,可以使页 ...
- jQuery-实现简单的Ajax请求封装
封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...
- Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...
- 原生态AJAX详解和jquery对AJAX的封装
AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...
- 【前端学习笔记04】JavaScript数据通信Ajax方法封装
//Ajax 方法封装 //设置数据格式 function setData(data){ if(!data){ return ''; } else{ var arr = []; for(k in da ...
- 原生ajax与封装的ajax使用方法
当我们不会写后端接口来测试ajax时,我们可以使用node环境创建一个本地服务器. 1.创建一个本地服务器可参考http://www.cnblogs.com/heyujun-/p/6793900.ht ...
- Ajax入门(二)Ajax函数封装
如果看了的我上一篇博客<Ajax入门(一)从0开始到一次成功的GET请求>的话,肯定知道我们已经完成了一个简单的get请求函数了.如下: 1234567891011121314151617 ...
- js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
随机推荐
- SpringBoot&Shiro实现权限管理
SpringBoot&Shiro实现权限管理 引言 相信大家前来看这篇文章的时候,是有SpringBoot和Shiro基础的,所以本文只介绍整合的步骤,如果哪里写的不好,恳请大家能指出错误,谢 ...
- 前端开发: webStorm手机真机调试
目录 1. 做好准备工作 2. 开始设置 3. 配置路径 4. 匹配路径设置 5. 设置完成,即可体验 文章首发微信公众号飙码人生 2018-05-21 18:21:15 1. 做好准备工作 安装we ...
- C++读入输出优化
读入输出优化虽然对于小数据没有半点作用,但是对于大数据来说,可以优化几十ms. 有时就是那么几十ms,可以被卡掉大数据的点 读入优化 int read() { int x=0,sig=1; char ...
- 在Tomcat上发布Web项目的方式
一. Tomcat的使用: 安装:解压压缩包即可 注意:安装目录不能有中文 目录结构: ①bin:可执行文件 ②conf:可执行文件 ③lib:依赖的jar包 ④logs:日志文件 ⑤:temp:临时 ...
- 操作系统-schedule函数
1. Linux 0.11的调度函数schedule() 也就是找到了counter最大的进程,然后就跳出去执行switch_to,对应上面的优先级算法,而counter本身也是时间片,也作了轮转调度 ...
- selenium基本对象之——数值型
python的数值类型,除了魔法方法以为,只有下面的这些方法: 整形的方法有:as_integer_ratio.bit_length.from_bytes.to_bytes.conjugate.ima ...
- Vue2.0 【第一季】第2节 v-if v-else v-show 指令
目录 Vue2.0 [第一季]第2节 v-if v-else v-show 指令 第二节 v-if v-else v-show 指令 2.1 v-if指令.v-else指令: 2.2 v-show的使 ...
- vue基础 ref的作用
1. ref 获取dom元素,除了能获取dom元素也能获取组件dom, 组件通信: 在父组件中直接调用ref定义的组件的数据或者方法 <div id="app&qu ...
- shell脚本中的各种表达式介绍和使用
#前言:在shell脚本中,有各种的表达式,包括有条件测试表达式,文件表达式,字符串表达式,整数表达式,接下来我们来了解一下他们的使用方法 1.条件测试表达式 #首先来看一下条件测试语法 #条件测试语 ...
- 《自拍教程46》Python_adb自动拍照100张
Android手机测试, 涉及照相机(Camera)应用程序的稳定性测试的用例, 需要涉及100张照片的拍照自动化测试. 准备阶段 先清理老照片,照片一般存放在/scard/DCIM目录下 adb s ...