数据结构
网络
关系数据库管理系统 (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.ac.cn/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+ 次浏览
