JQ中的Ajax的封装
1.认识JQ中ajax的封装
jQ 对于ajax的封装有两层实现；$.ajax 为底层封装实现；基于 $.ajax ，分别实现了$.get 与$.post 的高层封装实现；
2.Ajax的底层实现基本语法：
async： 布尔类型，代表是否异步，true代表异步，false同步，默认为true
cache： 是否缓存，布尔类型，true代表缓存，false代表不缓存，默认为true
complete： 当Ajax状态码（readyState）为4的时候所触发的回调函数
contentType： 发送信息至服务器时内容编码类型；(默认: "application/x-www-form-urlencoded")
data： 要求是一个字符串格式，Ajax发送时所传递的数据
dataType： 期待的返回值类型，可以是text，xml，json，默认为text类型
success： 当Ajax状态码为4且响应状态码为200时所触发的回调函数
type： Ajax发送网络请求的方式，(默认: "GET")；
url： 请求的url地址
GET请求
<body>
<input type="button" value="点击" id="btu">
</body>
<script>
$('#btu').click(function(){
//get请求
$.ajax({
url:'/jq_ajax_get',
success:function(data){
alert(data);
}
});
});
</script>
POST请求：
<body>
<input type="button" value="点击" id="btu">
</body>
<script>
$('#btu').click(function () {
$.ajax({
url: '/jq_ajax_post',
type: 'post',
data: 'id=1111',
success: function (data) {
alert(data);
},
// async:false,
});
// alert(22); //检验同步异步
});
</script>
3.ajax的高层实现：
GET应用：
基本语法：$.get(url, [data], [callback], [type])
url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。
案例：
<body>
<input type="button" value="点击" id="btu">
</body>
<script>
$('#btu').click(function(){
$.get('/jq_ajax_get',function(data){
alert(data);
},'json');
});
</script>
POST应用：
$.post(url, [data], [callback], [type])
url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。t
ype:返回内容格式，xml, html, script, json, text, _default。
案例：
<body>
<input type="button" value="点击" id="btu">
</body>
<script>
$('#btu').click(function () {
$.post('/jq_ajax_post',
{ id: '11' },
function (data) {
alert(data);
});
});
</script>
JQ中的Ajax的封装的更多相关文章
- jq中的ajax传参
一. jq中的Ajax传参有两种 1.通过url地址来传参 2.通过data来传递参数 1. url来传递参数 function GetQuery(id) { | ...
- jq中的ajax
jq对ajax进行了封装,在jq中$.ajax()方法是最底层的方法,第二层是load() , get() , post()方法,第三层是$.getScript()和$.getJSON().基本第二种 ...
- 对Jquery中的ajax再封装,简化操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery中的ajax参数
jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...
- jq的ajax交互封装
jq封装的ajax,然后 在此前和此后都是很多要考虑的 ,何不 想想构思封装下. 下面: 基本上网页都存在各种ajax,使得网页变得更加易于操作. 举个长长的例子吧: <input type= ...
- JavaScript原生封装ajax请求和Jquery中的ajax请求
前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...
- rxjs入门3之项目中ajax函数封装
项目中ajax函数封装 ⽹页应⽤主要数据源有两个:⼀个是⽹页中的DOM事件,另⼀个就是通过AJAX获得的服务器资源.我们已经知道fromEvent这个操作符可以根据DOM事件产⽣Observable对 ...
- ajax的封装——jq简化版
最近在复习ajax的知识,练习了下ajax的封装,此处做下笔记 废话不多说,直接代码 //发请求 //此处的url为请求地址,type为请求方式,success为请求成功的回调函数 myaxios({ ...
- 原生及jq方式使用ajax
1.原生js实现Ajax方法: // 封装ajax()方法 function ajax(url,fnSucc,fnFaild){ //1.创建Ajax 对象 if(window.XMLHttpRequ ...
随机推荐
- PHP 微信公众号/小程序获取openid,用户信息
1.获取code (获得openid的前置条件) 地址:https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redi ...
- Spring Cloud Gateway、并发编程等等
2019年 JUC线程池服务ExecutorService接口实现源码分析 Github Page:http://www.throwable.club/2019/07/27/java-concurre ...
- Git - Git本地仓库与GitHub远程仓库关联
前言 Git本地仓库与GitHub仓库的关联逻辑如下 创建Key 在本地仓库下,新建Key文件夹,然后打开Key文件夹,单击鼠标右键,选择Git Bash Here. 输入命令:ssh-keygen ...
- C#控制内插字符串的格式
C#6.0推出了内插字符串 结果展示: 内插表达式字段宽度和对齐方式: 结果展示:(+/-代表右对齐.左对齐,数字表示显示宽度)
- ios中友盟集成好使用总结
参考链接:https://www.jianshu.com/p/a8ff46a7c966
- redis windows版安装
首先到 https://github.com/ServiceStack/redis-windows 下载redis 然后将下载的文件解压 然后获取里面的这个压缩包并且解压 这是2.8.2101版本的, ...
- Thymeleaf常用语法：数据延迟加载
在处理模板时,可以由模板逻辑决定是否加载数据,以提高性能.在Spring Boot控制器中设置数据时,使用LazyContextVariable可以实现这功能. 开发环境:IntelliJ IDEA ...
- Linux iotop工具简介
iotop的简介: iotop是一款开源.免费的用来监控磁盘I/O使用状况的类似top命令的工具,iotop可以监控进程的I/O信息.它是Python语言编写的,与iostat工具比较,iostat是 ...
- tomcat的一些优化及报错
以下为转发来,具体地址为 http://blog.csdn.net/chen3888015/article/details/7432488 环境centos5.7 tomcat6 http://apr ...
- 6个最优秀的微信小程序UI组件库
开发微信小程序的过程中,选择一款好用的组件库,可以达到事半功倍的效果.自从微信小程序面世以来,不断有一些开源组件库出来,下面6款就是排名比较靠前,用户使用量与关注度比较高的小程序UI组件库.还没用到它 ...