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 ...
随机推荐
- python - selenium模块简介
为什么要使用Selenium? 很多浏览器渲染页面的方式都很难找出其规律, 但是利用Selenium来驱动加载网页就可以直接拿到javaScript渲染后的结果了, 不需要再担心其相关的加密系统 声明 ...
- 六、SQL优化
SQL优化 优化策略 一.尽量全值匹配 当建立了索引列后,尽量在where条件中使用所有的索引. CREATE TABLE `staffs`( id int primary key auto_incr ...
- jQuery 源码解析(二十二) DOM操作模块 复制元素 详解
本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...
- API收藏
1.百度图片api get 方法$word = '北海';//要搜索的词$num = 3;//要搜索的数量$url = 'https://image.baidu.com/search/acjson?t ...
- 编译原理 #04# 中缀表达式转化为四元式（JavaScript实现）
// 实验存档 运行截图: 代码中的总体转化流程:中缀表达式字符串→tokens→逆波兰tokens(即后缀表达式)→四元式. 由后缀表达式写出四元式非常容易,比较繁琐的地方在于中缀转逆波兰,这里采用 ...
- #w29 2019年大前端技术周刊
本周是2019年第29周 移动端 移动开发十周年总结 相对于持续几百年工业革命,移动互联网的发展是短暂的.在这十几年的发展中,为了满足开源和节流的涌现出很多技术.接下来我们将会以开发方式的演进.基建与 ...
- 从七个方面，面试BAT大厂高级工程师，纯干货！
转载注明:https://blog.csdn.net/WantFlyDaCheng/article/details/100078782 一.框架是重点,但别让人感觉你只会山寨别人的代码 二.别单纯看单 ...
- Kubernetes的Job对象
Deployment.StatefulSet及DaemonSet三个主要用来进行长时间业务,不会退出. 而有一些离线业务,或者叫Batch Job(计算业务),计算完成后就直接退出 了,如果用Depl ...
- Python 关于 pip 部分相关库的安装
下文中“:”后面安装的安装语句需要打开 cmd (命令提示符),在 cmd 中输入. 示例: 在搜索框输入 cmd,单机命令提示符: 然后输入安装语句,按回车键: 因为我之前已经装过了,所以这里显示的 ...
- 工作总结汇报公司介绍产品宣传品牌展示企业文化PPT模
清晰明了:在工作总结会议上都是要严肃为主,搞的花里胡哨既不好看也让领导有不好的影响:微粒体:模板样式立体效果非常好,能够一把将观众眼球给吸引住:样式齐全:各种PPT样式都有,能够承载工作汇报各种内容: ...