04-04：卡其漫畫-jQuery中的AJAX使用

時間 2019-11-17

標籤卡其 jquery ajax 使用欄目 JQuery 简体版

原文原文鏈接

前言html

hello，你們好，接下來咱們一塊兒來學習一下jQuery中的AJAX技術的使用，可讓咱們的jquery

開發更簡單，高效！！！ajax

內容概要後端

本章節的主要內容是來學習jQuery這個強大的方法庫中已經封裝好的ajax方法的使用，通bash

過本章節的知識學習以後，能夠很是方便高效的使用jQuery中的ajax方法來發送請求，獲取對服務器

應的數據。異步

咱們先來回顧一下ajax的基本使用步驟：函數

1.建立異步對象學習
2.設置請求行ui
3.設置請求頭
4.設置請求體
5.監視異步對象的狀態變化

因爲每次發送ajax請求的時候，都須要咱們手動的來new XMLHttpRequest，這些都是重

復的行爲，因而就有些大牛幫助咱們把經常使用的這些代碼封裝起來了，其中jQuery當中的ajax方

法就是咱們比較經常使用的發送異步請求的方法。

在這裏呢，咱們只須要關注ajax方法中傳入對象的幾個屬性的具體用法便可。咱們能夠先給頁

面中的一個按鈕註冊一個事件，經過事件的觸發，來發送ajax請求，jQuery中的ajax方法是需

要傳入一個對象，此對象有以下幾個屬性是須要重點學習

掌握的：

url：規定發送請求的 URL。默認是當前頁面
type：規定請求的類型（GET 或 POST）
dataType:：預期的服務器響應的數據類型
success：當請求成功時運行的函數。

接下來咱們就小demo的方式來具體演示一下此方法的使用

首先，新建一個getData.html頁面，在此頁面中添加一個input按鈕，並引入jQuery這個方法

第2步：獲取這個頁面中的按鈕，並註冊事件

第3步：調用jQuery中的ajax方法發送請求，此方法中要傳入一個對象，對象中有上面介紹的屬性

具體完整代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery中的ajax</title>
  <script src="./js/jquery.js"></script>
</head>
<body>
  <input type="button" value="獲取數據">
  <script>
    // 1. 獲取頁面中的按鈕
    var btn = document.querySelector('input')

    // 2. 給事件源註冊事件
    btn.onclick = function(){

      // 3. 調用jQuery中的ajax方法發送請求
      $.ajax({
        type:'get',  //  設置發送請求的方式
        url:'https://www.easy-mock.com/mock/5d62446e09c1067760274c0b/example/getStuInfo',// 設置請求的路徑
        success:function(data){
          console.log(data);
        }
      })
    }
  </script>
</body>
</html>複製代碼