資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律學如何在 jQuery 中使用 Ajax 請求傳送 FormData 物件？
在本教程中，我們將學習如何在 jQuery 中使用 Ajax 請求傳送 FormData 物件。
FormData 物件以鍵值對的形式儲存值。它主要用於透過 HTTP 請求將表單資料傳送到伺服器。如果表單的編碼型別設定為 multipart/form-data，則提交的資料將透過 submit() 函式以類似的方式傳送。FormData 物件包含多個操作方法，例如 append、delete、set 等。
語法
const formData = new FormData()
formData.append('key', 'value')
使用者可以按照上述語法建立 FormData 物件。
非同步 JavaScript 和 XML 稱為 AJAX。它在您的網頁上執行非同步操作。AJAX 使用 HTTP 請求與伺服器通訊，並接收請求的資訊作為 HTTP 響應。jQuery 庫具有有效執行 ajax 操作的方法。我們可以在 ajax 的 data 引數中傳送 FormData 物件。
語法
//FormData Object
const formData = new FormData()
formData.append('key', 'value')
// AJAX
$.ajax({
url: '...URL ENDPOINT',
data: formData,
type: 'POST', // GET/POST
processData: false,
success: function (data) {
// Code blocks if formData send successfully
},
error: function (err) {
// Code blocks if formData send failed
},
})
在上述語法中，我們展示瞭如何在 jQuery 中使用 Ajax 請求傳送 FormData 物件。
示例
在下面的示例中，我們使用了 jQuery 中的 Ajax 請求將 FormData 物件傳送到後端伺服器。我們使用了多個輸入欄位來獲取使用者的姓名、電子郵件和密碼輸入，這些輸入欄位值將捆綁在 FormData 物件中，併發送到後端伺服器。jQuery 的 ajax 方法有助於傳送 HTTP 請求。在 ajax 的 data 引數中，我們設定了 FormData 物件。該方法設定為 POST 以傳送 POST 請求。“傳送”按鈕關聯了一個按鈕點選事件處理程式，該處理程式對伺服器執行 ajax 請求。
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h2> Sending <i> FormData objects with Ajax requests </i> in jQuery </h2>
<label for = "name">Name: </label> <input id = "name" type = "text" name = "name" /><br>
<label for = "email">Email: </label> <input id = "email" type = "text" name = "email" /><br><br>
<button id = "btn" onclick = "btnClick()">Send</button>
<div id = "root" >Click on the send button to submit the FormData object</div>
<script>
const root = document.getElementById('root')
const name = document.getElementById('name')
const email = document.getElementById('email')
function btnClick() {
//FormData Object
const formData = new FormData()
formData.append('name', name.value)
formData.append('email', email.value)
// AJAX
$.ajax({
url: 'https://jsonplaceholder.typicode.com/posts',
data: formData,
type: 'POST',
processData: false,
contentType: false,
success: function (data) {
root.innerHTML = 'FormData Object Send Successfully!'
},
error: function (err) {
root.innerHTML = 'FormData Object Send Failed!'
},
})
}
</script>
</body>
</html>
本教程教我們如何在 jQuery 中使用 Ajax 請求傳送 FormData 物件。此外，我們還學習了 FormData 物件、Ajax 請求及其語法。在示例中，我們學習瞭如何使用 Ajax 請求將輸入欄位資料作為 FormData 物件傳送到伺服器。使用者可以參考示例來了解在 jQuery 中使用 Ajax 請求傳送 FormData 物件。
14K+ 次瀏覽
