学习AJAX必知必会（4）~JQuery发送Ajax请求

• 2022 年 1 月 22 日
• 笔记
• 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('//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('//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: '//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)
  });