在 JS 中如何使用 Ajax 來進行請求

人已經過原 Danny Markov 授權翻譯

在本教程中，我們將學習如何使用 JS 進行AJAX調用。

1.AJAX

術語AJAX 表示 異步的 JavaScript 和 XML。

AJAX 在 JS 中用于發出異步網絡請求來獲取資源。當然，不像名稱所暗示的那樣，資源并不局限于XML，還用于獲取JSON、HTML或純文本等資源。

有多種方法可以發出網絡請求并從服務器獲取數據。我們將一一介紹。

2.XMLHttpRequest

XMLHttpRequest對象（簡稱XHR）在較早的時候用于從服務器異步檢索數據。

之所以使用XML，是因為它首先用于檢索XML數據。現在，它也可以用來檢索JSON, HTML或純文本。

事例 2.1: GET

function success() {
  var data = JSON.parse(this.responseText)
  console.log(data)
}

function error (err) {
  console.log('Error Occurred:', err)
}

var xhr = new XMLHttpRequest()
xhr.onload = success
xhr.onerror = error
xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1")
xhr.send()

我們看到，要發出一個簡單的GET請求，需要兩個偵聽器來處理請求的成功和失敗。我們還需要調用open()和send()方法。來自服務器的響應存儲在responseText變量中，該變量使用JSON.parse()轉換為JavaScript 對象。

function success() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function error(err) {
    console.log('Error Occurred :', err);
}

var xhr = new XMLHttpRequest();
xhr.onload = success;
xhr.onerror = error;
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
);

我們看到POST請求類似于GET請求。我們需要另外使用setRequestHeader設置請求標頭“Content-Type” ，并使用send方法中的JSON.stringify將JSON正文作為字符串發送。

2.3 XMLHttpRequest vs Fetch

早期的開發人員，已經使用了好多年的 XMLHttpRequest來請求數據了?，F代的fetch API允許我們發出類似于XMLHttpRequest（XHR）的網絡請求。主要區別在于fetch()API使用Promises，它使 API更簡單，更簡潔，避免了回調地獄。

3. Fetch API

Fetch 是一個用于進行AJAX調用的原生 JavaScript API，它得到了大多數瀏覽器的支持，現在得到了廣泛的應用。

3.1 API用法

fetch(url, options)
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

API參數

fetch() API有兩個參數

url是必填參數，它是您要獲取的資源的路徑。
options是一個可選參數。不需要提供這個參數來發出簡單的GET請求。

method: GET | POST | PUT | DELETE | PATCH
headers: 請求頭，如 { “Content-type”: “application/json; charset=UTF-8” }
mode: cors | no-cors | same-origin | navigate
cache: default | reload | no-cache
body: 一般用于POST請求

API返回Promise對象

fetch() API返回一個promise對象。

如果存在網絡錯誤，則將拒絕，這會在.catch()塊中處理。
如果來自服務器的響應帶有任何狀態碼(如200、404、500)，則promise將被解析。響應對象可以在.then()塊中處理。

錯誤處理

請注意，對于成功的響應，我們期望狀態代碼為200（正常狀態），但是即使響應帶有錯誤狀態代碼（例如404（未找到資源）和500（內部服務器錯誤）），fetch() API 的狀態也是 resolved，我們需要在.then() 塊中顯式地處理那些。

我們可以在response 對象中看到HTTP狀態：

HTTP狀態碼，例如200。
ok –布爾值，如果HTTP狀態代碼為200-299，則為true。

3.3 示例：GET

const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .catch(err => console.error(err));

getTodoItem.then(response => console.log(response));

Response

 { userId: 1, id: 1, title: "delectus aut autem", completed: false }

在上面的代碼中需要注意兩件事:

fetch API返回一個promise對象，我們可以將其分配給變量并稍后執行。
我們還必須調用response.json()將響應對象轉換為JSON

錯誤處理

我們來看看當HTTP GET請求拋出500錯誤時會發生什么：

fetch('http://httpstat.us/500') // this API throw 500 error
  .then(response => () => {
    console.log("Inside first then block");
    return response.json();
  })
  .then(json => console.log("Inside second then block", json))
  .catch(err => console.error("Inside catch block:", err));

Inside first then block
? ? Inside catch block: SyntaxError: Unexpected token I in JSON at position 4

我們看到，即使API拋出500錯誤，它仍然會首先進入then()塊，在該塊中它無法解析錯誤JSON并拋出catch()塊捕獲的錯誤。

這意味著如果我們使用fetch()API，則需要像這樣顯式地處理此類錯誤：-

fetch('http://httpstat.us/500')
  .then(handleErrors)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error("Inside catch block:", err));

function handleErrors(response) {
  if (!response.ok) { // throw error based on custom conditions on response
      throw Error(response.statusText);
  }
  return response;
}

 ? Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)

3.3 示例：POST

fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    body: JSON.stringify({
      completed: true,
      title: 'new todo item',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))

Response

? {completed: true, title: "new todo item", userId: 1, id: 201}

在上面的代碼中需要注意兩件事:-

POST請求類似于GET請求。我們還需要在fetch() API的第二個參數中發送method，body 和headers 屬性。
我們必須需要使用 JSON.stringify() 將對象轉成字符串請求body參數

4.Axios API

Axios API非常類似于fetch API，只是做了一些改進。我個人更喜歡使用Axios API而不是fetch() API，原因如下：

為GET 請求提供 axios.get()，為 POST 請求提供 axios.post()等提供不同的方法，這樣使我們的代碼更簡潔。
將響應代碼（例如404、500）視為可以在catch()塊中處理的錯誤，因此我們無需顯式處理這些錯誤。
它提供了與IE11等舊瀏覽器的向后兼容性
它將響應作為JSON對象返回，因此我們無需進行任何解析

4.1 示例：GET

// 在chrome控制臺中引入腳本的方法

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/axios/dist/axios.min.js';
document.head.appendChild(script);

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.data))
  .catch(err => console.error(err));

Response

{ userId: 1, id: 1, title: "delectus aut autem", completed: false }

我們可以看到，我們直接使用response獲得響應數據。數據沒有任何解析對象，不像fetch() API。

錯誤處理

axios.get('http://httpstat.us/500')
  .then(response => console.log(response.data))
  .catch(err => console.error("Inside catch block:", err));

Inside catch block: Error: Network Error

我們看到，500錯誤也被catch()塊捕獲，不像fetch() API，我們必須顯式處理它們。

4.2 示例：POST

axios.post('https://jsonplaceholder.typicode.com/todos', {
      completed: true,
      title: 'new todo item',
      userId: 1
  })
  .then(response => console.log(response.data))
  .catch(err => console.log(err))

 {completed: true, title: "new todo item", userId: 1, id: 201}

我們看到POST方法非常簡短，可以直接傳遞請求主體參數，這與fetch（）API不同。

作者：Danny Markov 譯者：前端小智來源：tutorialzine

原文：https://tutorialzine.com/2017/12-terminal-commands-every-web-developer-should-know

現代web開發中，表單是用戶與網站互動的重要方式之一。HTML5為表單提交提供了強大的功能和豐富的輸入類型，讓收集和驗證用戶輸入數據變得更加容易和安全。本文將詳細介紹HTML5表單的各個方面，包括基本結構、輸入類型、驗證方法和提交過程。

基本結構

HTML表單由<form>標簽定義，它可以包含輸入字段、標簽、按鈕等元素。一個基本的表單結構如下所示：

<form action="/submit_form" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">電子郵箱：</label>
  <input type="email" id="email" name="email" required>
  
  <input type="submit" value="提交">
</form>

在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標簽，這不僅有助于用戶理解輸入的內容，也有助于屏幕閱讀器等輔助技術。<form>標簽的action屬性定義了數據提交到服務器的URL，method屬性定義了提交數據的HTTP方法（通常是post或get）。

輸入類型

HTML5提供了多種輸入類型，以支持不同的數據格式和設備。

文本輸入

<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>

<!-- 密碼 -->
<input type="password" name="password" required minlength="8">

<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">

<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">

數值輸入

<!-- 數值 -->
<input type="number" name="age" min="18" max="100" step="1" required>

<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">

<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">

日期和時間輸入

<!-- 日期 -->
<input type="date" name="birthdate" required>

<!-- 時間 -->
<input type="time" name="appointmenttime">

<!-- 日期和時間 -->
<input type="datetime-local" name="appointmentdatetime">

選擇輸入

<!-- 復選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>

<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>

<!-- 下拉選擇 -->
<select name="country" required>
  <option value="china">中國</option>
  <option value="usa">美國</option>
</select>

特殊輸入

<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">

<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>

驗證方法

HTML5表單提供了內置的驗證功能，可以在數據提交到服務器之前進行檢查。

必填字段

<input type="text" name="username" required>

正則表達式

<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數的郵政編碼">

數值范圍

<input type="number" name="age" min="18" max="99">

長度限制

<input type="text" name="username" minlength="4" maxlength="8">

表單提交

當用戶填寫完表單并點擊提交按鈕時，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數據將被發送到服務器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。

<input type="submit" value="提交">

可以使用JavaScript來自定義驗證或處理提交事件：

document.querySelector('form').addEventListener('submit', function(event) {
  // 檢查表單數據
  if (!this.checkValidity()) {
    event.preventDefault(); // 阻止表單提交
    // 自定義錯誤處理
  }
  // 可以在這里添加額外的邏輯，比如發送數據到服務器的Ajax請求
});

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>

<!-- 表單定義 -->
<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <br>

  <label for="email">電子郵件：</label>
  <input type="email" id="email" name="email">
  <br>

  <input type="button" value="提交" onclick="submitForm()">
</form>

<script>
// JavaScript函數，處理表單提交
function submitForm() {
  // 獲取表單元素
  var form=document.getElementById('myForm');
  
  // 創建一個FormData對象
  var formData=new FormData(form);
  
  // 創建一個空對象來存儲表單數據
  var formObject={};
  
  // 將FormData轉換為普通對象
  formData.forEach(function(value, key){
    formObject[key]=value;
  });
  
  // 將對象轉換為JSON字符串
  var jsonString=JSON.stringify(formObject);
  
  // 彈出包含JSON字符串的對話框
  alert(jsonString);
  
  // 阻止表單的默認提交行為
  return false;
}
</script>

</body>
</html>

在這個例子中：

我們定義了一個包含姓名和電子郵件輸入字段的表單，以及一個按鈕，當點擊按鈕時會調用submitForm函數。
在submitForm函數中，我們首先獲取表單元素并創建一個FormData對象。然后，我們遍歷FormData對象，將表單數據復制到一個普通的JavaScript對象formObject中。
接著，我們使用JSON.stringify方法將formObject轉換成JSON字符串。
最后，我們使用alert函數彈出一個包含JSON字符串的對話框。

注意，這個例子中我們使用了type="button"而不是type="submit"，因為我們不希望表單有默認的提交行為。我們的JavaScript函數submitForm會處理所有的邏輯，并且通過返回false來阻止默認的表單提交。如果你想要使用type="submit"，你需要在<form>標簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。

結論

HTML5的表單功能為開發者提供了強大的工具，以便創建功能豐富、用戶友好且安全的網站。通過使用HTML5的輸入類型和驗證方法，可以確保用戶輸入的數據是有效的，同時提高用戶體驗。隨著技術的不斷進步，HTML5表單和相關API將繼續發展，為前端工程師提供更多的可能性。

JAX上傳的用戶體驗更好，HTML上傳用戶使用更方便一點，直接在網頁里面就能夠操作了。示例在下面提供了，是完整的源代碼，有教程，有視頻教程，基本上使用非常簡單，開發也非常簡單，有技術支持，

網上搜了一下，基本上講這塊的文章還是很多，但是就是一個字亂，講的很混亂。也沒有提供完整的前后端示例。

用戶上傳的文件比較大，有20G左右，直接用HTML傳的話容易失敗，服務器也容易出錯，需要分片，分塊，分割上傳。也就是將一個大的文件分成若干個小文件塊來上傳，另外就是需要實現秒傳功能和防重復功能，秒傳就是用戶如果上傳過這個文件，那么直接在數據庫中查找記錄就行了，不用再上傳一次，節省時間，實現的思路是對文件做MD5計算，將MD5值保存到數據庫，算法可以用MD5，或者CRC，或者SHA1，這個隨便哪個算法都行。

分片還需要支持斷點續傳，現在HTML5雖然提供了信息記錄功能，但是只支持到了會話級，也就是用戶不能關閉瀏覽器，也不能清空緩存。但是有的政府單位上傳大文件，傳了一半下班了，明天繼續傳，電腦一關結果進度信息就丟失了，這個是他們的一個痛點。

切片的話還有一點就是在服務器上合并，一個文件的所有分片數據上傳完后需要在服務器端進行合并操作。

1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復制到項目中

示例中已經包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對應：文件初始化，文件數據上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動測試

啟動成功

效果

數據庫

在線咨詢

上一篇：長春人注意！查詢方式公布
下一篇：什么是css選擇器？css3中5種常見基本選擇器（代

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

在 JS 中如何使用 Ajax 來進行請求

1.AJAX

2.XMLHttpRequest

事例 2.1: GET

2.3 XMLHttpRequest vs Fetch

3. Fetch API

3.1 API用法

3.3 示例：GET

3.3 示例：POST

4.Axios API

4.1 示例：GET

4.2 示例：POST

基本結構

輸入類型

文本輸入

數值輸入

日期和時間輸入

選擇輸入

特殊輸入

驗證方法

必填字段

正則表達式

數值范圍

長度限制

表單提交

完整例子

結論

您的項目需求