使用jQuery中Ajax的封装函数——$.get()
- 使用方法
$.get(URL, [请求数据], 响应成功后的回调函数)
$.get('delete.php', 'sid=8', function(txt){ if(txt==='succ'){} })
$.get('delete.php', {sid:8}, function(txt, msg, xhr){ if(txt==='succ'){} })
含义
向指定的URL发起异步的GET请求,把请求数据追加在URL的后面;服务器给出了成功的响应会自动调用第三个参数——doResponse。
提示
$.get 会根据服务器端返回的响应消息内容类型自动决定如何处理,如applicatoin/json,会自动调用JSON.parse(xhr.responseText)进行解析!
案例演示:异步级联下拉列表
<select id="selectType">
<option value="0">—请选择产品类型—</option>
</select>
<select id="selectProducer">
<option value="0">—请选择生产厂家—</option>
</select>
<select id="selectModel">
<option value="0">—请选择产品型号—</option>
</select>
- 当页面加载完成后,异步请求所有的“产品类型”;
$(function () {
$.get('type_select.php', function (data, msg, xhr) {
// console.log(arguments);
// console.log(data);
var html = '';
for (var i = 0; i < data.length; i++) {
html += `
<option value="${data[i].tid}">${data[i].tname}</option>
`;
}
selectType.innerHTML += html;
});
});
- 当产品类型选项发生改变后,异步请求对应的“生产厂家”;
$('#selectType').change(function (e) {
var tid = this.value;
if (tid === '0') {
selectProducer.innerHTML = '<option value="0">—请选择生产厂家—</option>';
return;
}
$.get('producer_select.php', {typeId: tid}, function (data) {
var html = '<option value="0">—请选择生产厂家—</option>';
for (var i = 0; i < data.length; i++) {
html += `
<option value="${data[i].pid}">${data[i].pname}</option>
`;
}
selectProducer.innerHTML = html;
});
});
- 当生产厂家选项发生改变后,异步请求该厂家的“产品型号”
缺点
只能处理成功的响应消息!如果服务器端返回了错误的响应消息(如404)该函数不会有任何的提示——没有相关的回调函数!