JQuery中对 Ajax 的封装
-
目录
一、【JQuery】load() 方法
-
load( )
-
$element.get( url , [data] , [callback] , [type]);
-
url
:请求 HTML url地址; -
data
:发送给服务器的(key/value形式)数据; -
callback
:请求完成时的回调函数;(xml/html/script/json/text/_default);
-
-
Let’s Coding:
- HTML 内容
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>getJSON()</title> <script src=""></script> </head> <body> <button id='btn'>Req</button> <p id='content'>Test text</p> </body> </html>
- JS 内容
$('#btn').click(function(){ // 注意你需要在当前目录下创建一个 test.txt 文件 写入一些数据,方便展示 $('#content').load('test.text',function(){ console.log('异步 request success'); }); });
- HTML 内容
-
😁Tip:
load 方法在使用时,如果有 data 参数,则请求方法为 POST , 反之 ,请求方法为 GET;
-
二、【JQuery】get() && post() 方法
-
get ( )
-
$.get( url , [data] , [callback] , [type]);
-
url
:请求 HTML url地址; -
data
:发送给服务器的(key/value形式)数据; -
callback
:请求完成时的回调函数; -
type
:设置返回数据内容的格式(xml/html/script/json/text/_default);
-
-
Let’s Coding:
<!-- $('#btn').click(function(){--> <!-- // 注意修改 url--> <!-- $.get('../../Public/data.json',{"name":"张三"},function(response){--> <!-- // 根据传入的内容,返回对应数据内容--> <!-- console.log(response);--> <!-- // 不指定返回类型,默认为原数据类型--> <!-- });--> <!-- // 指定返回文本--> <!-- //},'text');--> <!-- });--> $('#btn').click(function(){ $.post('../../Public/data.json',{"name":"张三"},function(response){ console.log(response); },'text'); });
-
-
post ( )
-
$.post( url , [data] , [callback] , [type]);
-
url
:请求 HTML url地址; -
data
:发送给服务器的(key/value形式)数据; -
callback
:请求完成时的回调函数; -
type
:设置返回数据内容的格式(xml/html/script/json/text/_default);
-
-
Let’s Coding:
$('#btn').click(function(){ // 注意修改 url $.post('../../Public/server.json',{"name":"张三"},function(response){ // 根据传入的内容,返回对应数据内容 console.log(response); // 不指定返回类型,默认为原数据类型 )}; // 指定返回文本 //},'text'); });
-
三、【JQuery】ajax() 方法
-
ajax ( )
-
$.ajax( url , [settings]);
url
:请求 HTML url地址;settings
:自行配置 ajax 参数;-
type :设置请求方式;
-
data :发送给服务器的请求数据;
-
dataType :服务端响应数据的类型;
-
success :请求成功后的
回调函数
;function ( data , textStatus , jqXHR ) { }
- data :服务端响应数据的类型;
- textStatus :服务器当前状态;
- jqXHR :Ajax 核心对象;
-
-
Let’s Coding:
$('#btn').click(function(){ // 注意修改 url $.ajax('../../Public/data.json',{ type:'get', dataType: 'json', success:function(data){ console.log(data); } }); });
-
四、【JQuery】getScript() 方法
-
getScript( )
-
$.getScript( url , [callback]);
-
url
:请求 HTML url地址; -
callback
:JavaScript 文件加载成功后的回调函数;
-
-
Let’s Coding:
$('#btn').click(function(){ // 注意修改 url $.getScript('../../Public/data.js',function(data){ console.log("不同的数据,不同的你。"); // 执行接收的数据; eval(data); }); });
-
😁Tip:
getScript() 方法目的是为了:动态控制 js 文件的执行时间,避免不必要的资源浪费;
-
五、【JQuery】getJSON() 方法
-
getJSON( )
-
$.getJSON( url , [data] , [callback]);
-
url
:请求 HTML url地址; -
data
:接收服务端返回的数据; -
callback
:JavaScript 文件加载成功后的回调函数;
-
-
Let’s Coding:
$('#btn').click(function(){ // 注意修改 url $.getJSON('../../Public/data.json',function(data){ console.log(data); }); });
-
😁Tip:
getJSON() 方法的请求类型为 GET 类型,并且只能接收 JSON 类型的数据;
-
六、【JQuery】表单序列化
在进行案例分析之前我们需要一些提前的技术基础和,一些我们需要用到的数据,如下:
-
本地下载一份 jquery 库;
下载路径可参见:JQuery 线上版本整合(线上版本使用时加载会慢,建议下载)
-
本地 data.json 文件一份,输入内容如下(亦可自行编写):
[ { "name": "javascript", "value": ["java","javascript","javascript 指南","javascript 高级"] }, { "name": "html", "value": ["html","html5","html 指南","html 高级"] }, { "name":"css", "value":["css","css 动画","css 入门","css 高级"] } ]
-
serialize() 方法
-
$element.serialize();
-
element
:表单元素 -
serialize() :将表单组件对应的数值序列化为指定格式的字符串内容;
-
-
Let’s Coding:
var $name = $('#name').val(); // 默认同步提交获取数据的方式 var data = $name.serialize(); // 异步提交表单 $('form').bind('submit',function(event){ event.preventDefault(); // 注意修改路径 $.post('../../Public/data.json',data,function(res){ console.log('post',data); }) });
-
-
serializeArray() 方法
-
$element.serializeArray();
-
element
:表单元素 -
serializeArray() :将表单组件对应的数值序列化为JSON格式的字符串内容;
-
-
Let’s Coding:
var $name = $('#name').val(); // 转化为JSON格式的数据 var data = $name.serializeArray(); // 异步提交表单 $('form').bind('submit',function(event){ event.preventDefault(); // 注意修改路径 $.post('../../Public/data.json',data,function(res){ console.log('post',data); }) });
-
七、【JQuery】实现【三级联动案例】
-
三级联动案例
-
案例前置
在进行案例分析之前我们需要一些提前的技术基础和,一些我们需要用到的数据,如下:
-
本地下载一份 jquery 库;
下载路径可参见:JQuery 线上版本整合(线上版本使用时加载会慢,建议下载)
-
本地 data.json 文件一份,输入内容如下(亦可自行编写):
[ { "name": "javascript", "value": ["java","javascript","javascript 指南","javascript 高级"] }, { "name": "html", "value": ["html","html5","html 指南","html 高级"] }, { "name":"css", "value":["css","css 动画","css 入门","css 高级"] } ]
-
-
案例分析
/* 动态搜索栏剖析 1.实现省市联动 2.实现市县联动 */
-
案例实施
- 1.构件HTML 结构:
<!-- 二级联动:子内容根据主内容的变化而变化 --> <!-- 三级联动:子内容根据上一级内容的变化而变化 --> <!-- 实现步骤: 1. 先实现一个二级联动; 2. 在实现一个二级联动; --> <select id="province"> <option value="">----</option> </select> <select id="city"> <option value="">----</option> </select> <select id="county"> <option value="">----</option> </select>
- 2.CSS 稍微修饰一丢丢:
body{ width:100vw; height:100vw; overflow:hidden; background-image:linear-gradient(60deg,#111111 0%,#222222 50%,#111111 100%); } select{ display:block; width:200px; height:50px; font-weight:bold; border-radius:10px; margin:100px auto; background-image:linear-gradient(60deg,#353 0%,#464 50%,#353 100%); }
- 3.JS 逻辑代码剖析:
var $provinceEle = $('#province'); // 获取 province 元素; var $cityEle = $('#city'); // 获取 province 元素; var $countyEle = $('#county'); // 获取 province 元素; var jsonData; // 存放所有数据; // 获取数据并添加省份信息 $.getJSON('../../Public/data-three.json',function(data){ jsonData = data; // 迭代获取省份并添加 $.each(data,function(idx,obj){ var provinceName = obj.province; // 添加 option 元素 $provinceEle.append($('<option value="'+ provinceName + '">' + provinceName + '</option>')) }); }); // 市联动 /* 添加对应省下的“市” */ $provinceEle.bind('change',function(){ $cityEle.empty(); addOption($cityEle,'----'); // 获取当前选中城市的名字; var nowSelectProvince = $(this).children('option:selected').text(); // 迭代获取对应的城市信息; $.each(jsonData,function(idx,obj){ // 找到对应省份下的城市并添加 if(nowSelectProvince === obj.province){ $.each(obj.cities,function(cidx,cobj){ $cityEle.append($('<option value="'+ cobj.city + '">' + cobj.city + '</option>')); }) } }) }); // 县联动 /* 添加对应省下的对应市下的“县” */ $cityEle.bind('change',function(){ console.log(11); $countyEle.empty(); addOption($countyEle,'----'); // 获取当前选中省的名字; var nowSelectProvince = $provinceEle.children('option:selected').text(); // 获取当前选中市的名字; var nowSelectCity = $(this).children('option:selected').text(); // 迭代获取对应的城市信息; $.each(jsonData,function(idx,obj){ // 找到对应省份下的城市并添加 if(nowSelectProvince === obj.province){ // 迭代所有市 $.each(obj.cities,function(cidx,cobj){ // 选中的市与当前正在迭代的市相等 if(nowSelectCity === cobj.city){ // 迭代该市之下的所有县并添加 $.each(cobj.counties,function(ccidx,ccval){ $countyEle.append($('<option value="'+ ccval + '">' + ccval + '</option>')); }); } }); }; }); }); // 添加元素 function addOption(ele,val){ ele.append($('<option value="'+ val + '">' + val + '</option>')); }
-
😁Tip:
本案例中存在一个小bug,若你已解决或你还未解决,请留言发表你的意见;
-
八、【JQuery】实现【搜索栏动态提示】
-
搜索栏动态提示
-
案例前置
在进行案例分析之前我们需要一些提前的技术基础和,一些我们需要用到的数据,如下:
-
本地下载一份 jquery 库;
下载路径可参见:JQuery 线上版本整合(线上版本使用时加载会慢,建议下载)
-
本地 data.json 文件一份,输入内容如下(亦可自行编写):
[ { "province": "河北省", "cities": [ { "city":"邢台市", "counties": [ "羊范镇","龙乡镇","朱庄镇" ] }, { "city":"邯郸市", "counties": [ "灵泉镇","古龙镇","婀娜镇" ] }, { "city":"保定市", "counties": [ "莲池区","东金庄乡","枣庄" ] } ] }, { "province": "河南省", "cities": [ { "city":"大金市", "counties": [ "阿龙镇","小麦镇","德邦镇" ] }, { "city":"小金市", "counties": [ "灵镇","龙镇","婀镇" ] }, { "city":"奥斯市", "counties": [ "池区","东金乡","枣庄市" ] } ] }, { "province": "湖北省", "cities": [ { "city":"邢市", "counties": [ "羊镇","啊镇","朱镇" ] }, { "city":"郸市", "counties": [ "我镇","你镇","他镇" ] }, { "city":"保市", "counties": [ "你区","我区","他区" ] } ] } ]
-
-
案例分析
/* 动态搜索栏剖析 1.为用户绑定输入事件; 2.获取用户的输入内容; 3.查询我们已存在的数据; 4.将已存在数据和用户输入信息进行比较等操作,并返回对应的数据; 4.1 用户数据和内存数据部分或全部符合; 5.更新数据到 HTML 页面; 6.辅助功能 6.1 匹配栏显示 6.2 失去焦点匹配栏消失 6.3 匹配栏消失 */
-
案例实施
- 1.构件HTML 结构:
<div class="container"> <input type="text" id="search"> <div class="alert"> <ul></ul> </div> </div>
- 2.CSS 稍微修饰一丢丢:
*{ margin:0; padding:0; box-sizing:border-box; } body{ width:100vw; height:100vw; overflow:hidden; background-image:linear-gradient(60deg,#111 0%,#222 50%, #111 100%); } .container{ margin-top:100px; margin-left:500px; font-size:16px; font-weight:bold; } #search,.alert{ width:300px; border:1px solid black; } #search{ font-size:16px; font-weight:bold; height:30px; padding:5px; } .alert{ display:none; } .alert li{ display:block; height:30px; padding:5px; background:gray; list-style:none; color:white; }
- 3.JS 逻辑代码剖析:
// 1.绑定 input 输入事件(用户输入信息时触发) $('#search').bind('input',function(){ // 清空已存在内容 $('.alert>ul').empty(); // 每次更新时删除上一次查询数据 $.getJSON('../Data/data.json',function(data){ // 3.getJSON('文件路径',function(接收返回结果)); $.each(data,function(index,obj){ var dataContent = obj.name; // 4.判断输入的数据,是否匹配已存在数据的索引 // >= 0 : 匹配 // = -1 : 不匹配 // 2.$('#search').val() 获取搜索栏内容 if ( dataContent.indexOf($('#search').val()) >= 0 ){ // 4.1输入的信息在已存在数据中 $.each(obj.value,function(idx,text){ // 5.遍历添加 $('.alert>ul').append($('<li>'+text+'</li>')); }) } }) }) // 6.2显示与用户搜索数据匹配的数据; $('.alert').css('display','block'); }); // 6.2绑定 blur 失去焦点事件 $('#search').bind('blur',function(){ // 6.3 提示栏消失 $('.alert').css('display','none'); });
-
九、【JQuery】异步提交表单
-
异步提交表单
在进行案例分析之前我们需要一些提前的技术基础和,一些我们需要用到的数据,如下:
-
本地下载一份 jquery 库;
下载路径可参见:JQuery 线上版本整合(线上版本使用时加载会慢,建议下载)
-
本地 data.json 文件一份,输入内容如下(亦可自行编写):
[ { "name": "javascript", "value": ["java","javascript","javascript 指南","javascript 高级"] }, { "name": "html", "value": ["html","html5","html 指南","html 高级"] }, { "name":"css", "value":["css","css 动画","css 入门","css 高级"] } ]
-
Coding
- 1.构件HTML 结构:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>异步提交表单</title> <script src="../../Public/jquery-min-1.12.4.js"></script> </head> <body> <form> <input type="text" id="name"> <input type="submit" id="sub"> </form> </body> </html>
- 2.JS 逻辑代码剖析:
var $name = $('#name').val(); // 构件发送给服务器的数据 var data = 'name' + $name; // 异步提交表单 $('form').bind('submit',function(event){ event.preventDefault(); // 注意修改路径 $.post('../../Public/data.json',data,function(res){ console.log('post',data); }) });
-