使用jQuery中Ajax的封装函数——$.get()

使用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）该函数不会有任何的提示——没有相关的回调函数！