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 ...
随机推荐
- 20191217-关于JPA @Query查询数据一直为空，直接在数据库里执行SQL则可以查出来
20191217-关于JPA @Query查询数据一直为空,直接在数据库里执行SQL则可以查出来 前提:数据库中查询,由于在视图中无主键概念,只是在代码中由逻辑主键.结果:数据中作为逻辑主键中有个字段 ...
- 【algo&ds】【pat】5.并查集及其应用
1.并查集的定义 在计算机科学中,并查集是一种树型的数据结构,用于处理一些不交集(Disjoint Sets)的合并及查询问题.有一个联合-查找算法(union-find algorithm)定义了两 ...
- SpringBoot：CORS处理跨域请求的三种方式
一.跨域背景 1.1 何为跨域? Url的一般格式: 协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址 示例: https://www.dustyblog.cn:8080/say/Hel ...
- 织女星开发板RISC-V内核实现微秒级精确延时
前言 收到VEGA织女星开发板也有一段时间了,好久没玩了,想驱动个OLED屏,但是首先要实现IIC协议,而实现IIC协议,最基本的就是需要一个精确的延时函数,所以研究了一下如何来写一个精确的延时函数. ...
- javascript数组在指定位置添加和删除元素
在JavaScript中,Array对象提供了一个强大的splice()方法,利用这个方法可以达到在数组的指定位置添加和删除元素的目的. 指定位置删除元素 要在指定位置删除元素,可以使用splice( ...
- CSS属性继承
在CSS中有一些属性是可以继承的,跟继承家产一样,哎,一代一代的往下传,而有些属性就比较惨了,不能继承,只能自己来设置. 我简略的总结了一下一些可以继承和不可以继承的属性 可继承 1.字体系列属性:f ...
- C#中获取指定路径下特定开头和后缀的所有文件
场景 指定一个文件路径,获取当前路径下所有文件,并筛选出以指定内容开头和结尾的文件. 注: 博客主页: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 ...
- TortoiseSVN 无法查看日志 日期显示1970-01-01的解决方案
对有问题的目录, 在右键菜单中, 使用 TortoiseSVN 的 Revision Graph 命令, 等待该命令执行完毕, 再重新使用 Show Log 命令, 即可查看日志了
- Ling to sql 多表查询，多个条件进行关联
使用多表查询进行关联时,提示 join子句中其中一个表达式的类型不正确,注意字段类型和名称要一致,否则join时提示语法错误,错误截图如下 var incomeDetails = from a in ...
- windows提权
提权辅助 https://bugs.hacking8.com/tiquan/