學習AJAX必知必會（4）~JQuery傳送Ajax請求

一、JQuery傳送Ajax請求

■ 對於get和post請求，jQuery內部封裝了Ajax請求的4個步驟和資料格式的設定

■ 對於Ajax通用請求，jQuery內部封裝了Ajax請求的4個步驟和資料格式設定、超時設定、請求失敗設定

（1）jquery-server的get請求：

• 客戶端html處理：

      $('button').eq(0).click(function () {
         //$get方法的回撥引數接收一個data作為引數---是服務端響應回來的資料（響應體）,然後設定響應的資料格式為json
         $.get('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
             console.log(data);
         }, 'json');
      });
  

• 服務端jquery-server請求的處理：

  app.get('/jquery-server', (request, response) => {
      //設定響應頭(允許跨域)
      response.setHeader('Access-Control-Allow-Origin', '*');
      //響應回去一個json物件
      const data = {
          name: '小黑',
          age: 18,
          sex: '男'
      };
      //設定響應體
      response.send(JSON.stringify(data));
  });
  

（2）jquery-server的post請求：

• 客戶端html處理：

      $('button').eq(1).click(function () {
          //$get方法的回撥引數接收一個data作為引數---是服務端響應回來的資料（響應體）,然後設定響應的資料格式為json
          $.post('http://127.0.0.1:8000/jquery-server', {a:1, b:2}, function (data) {
              console.log(data);
          }, 'json');
      });
  

• 服務端jquery-server請求的處理：

  app.post('/jquery-server', (request, response) => {
      //設定響應頭(允許跨域)
      response.setHeader('Access-Control-Allow-Origin', '*');
      //響應回去一個json物件
      const data = {
          name: '小白',
          age: 18,
          sex: '男'
      };
      //設定響應體
      response.send(JSON.stringify(data));
  });
  

（3）jquery-server的通用ajax請求：

• 客戶端html處理：

    $('button').eq(2).click(function () {
       $.ajax({
           url: 'http://127.0.0.1:8000/jquery-server/delay',//請求路徑
           data: {a:1,b:2,c:3},//請求引數（請求體）
           type:'get',//請求方式
           headers:{'Content-Type': 'application/x-www-form-urlencoded'},//請求頭
           dataType: 'json',//請求的資料格式
           timeout:4000,//超時設定
           success: function (data) {//請求成功的回撥
               console.log(data);
           },
           error: function () {//請求失敗的回撥
               console.log('請求出錯');
           }
       });
    });
  

• 服務端jquery-server請求的處理：

  //jquery-server請求超時處理
  app.get('/jquery-server/delay', (request, response) => {
      //設定響應頭(允許跨域)
      response.setHeader('Access-Control-Allow-Origin', '*');
      //響應回去一個json物件
      const data = {
          name: '小遲',
          age: 18,
          sex: '男'
      };
      //設定響應體
      setTimeout(() => {
          response.send(JSON.stringify(data));
      }, 3000)
  });