- AJAX 教程
- AJAX - 教程
- AJAX - 什么是 AJAX?
- Ajax - 历史
- Ajax - 动态站点与静态站点
- AJAX - 技术
- AJAX - action(操作)
- AJAX - XMLHttpRequest
- AJAX - 发送请求
- AJAX - 请求类型
- AJAX - 处理响应
- AJAX - 处理二进制数据
- AJAX - 提交表单
- AJAX - 文件上传
- AJAX - FormData 对象
- AJAX - 发送 POST 请求
- AJAX - 发送 PUT 请求
- AJAX - 发送 JSON 数据
- AJAX - 发送数据对象
- AJAX - 监控进度
- AJAX - 状态代码
- AJAX - 应用程序
- AJAX - 浏览器兼容性
- AJAX - 浏览器支持
- AJAX - 数据库操作
- AJAX - 安全性
- AJAX - 常见问题
- Fetch API 基础知识
- Fetch API - 基础知识
- Fetch API 与 XMLHttpRequest
- Fetch API - 浏览器兼容性
- Fetch API - headers
- Fetch API - 请求
- Fetch API - 响应
- Fetch API - 正文数据
- Fetch API - 凭证
- Fetch API - 发送 GET 请求
- Fetch API - 发送 POST 请求
- Fetch API - 发送 PUT 请求
- Fetch API - 发送 JSON 数据
- Fetch API - 发送数据对象
- Fetch API - 自定义请求对象
- Fetch API - 上传文件
- Fetch API - 处理二进制数据
- Fetch API - 状态代码
- Stream API 基础知识
- Stream API - 基础
- Stream API - 可读流
- Stream API - 可写流
- Stream API - 转换流
- stream API - 请求对象
- stream API - 响应正文
- Stream API - 错误处理
AJAX - 发送数据对象
在 AJAX 中,我们允许将数据对象作为 HTTP 请求的一部分从客户端发送到 Web 服务器。数据对象是包含键值对中的数据的对象。它们通常用 JavaScript 对象表示。因此,在 AJAX 中,发送数据对象意味着我们将结构化数据传递给服务器进行进一步处理。它可以包含表单输入、用户输入、用户信息或任何其他信息。不仅是数据对象,我们还可以使用 AJAX 和 XMLHttpRequest 从系统上传和发送文件。
以下是数据对象的格式 -
var myDataObject = {
"name": "Pinky",
"City": "Pune",
"Age": 23
}
现在要使用 XMLHttpRequest 发送此数据对象,我们需要使用 stringify() 方法将对象转换为 JSON 字符串,因为大多数框架都非常容易地支持 JSON 格式,而无需任何额外的工作。stringify() 方法是一个 JavaScript 内置函数,用于将对象或值转换为 JSON 字符串。
语法
var myData = JSON.stringify(myDataObject)
这里 myDataObject 是我们想要转换为 JSON 字符串的数据对象。
例在下面的程序中,我们将使用 XMLHttpRequest 发送数据对象。为此,我们将创建一个 XMLHttpRequest 对象,然后创建一个包含我们想要发送的数据的数据数据对象。然后,我们使用 stringify() 函数将数据对象转换为 JSON 字符串,并将标头设置为 “application/json” 以告诉服务器请求包含 JSON 数据。然后我们使用 send() 函数发送数据对象,响应由回调函数处理。
<!DOCTYPE html>
<html>
<body>
<script>
function sendDataObject() {
// Creating XMLHttpRequest object
var qhttp = new XMLHttpRequest();
// Creating data object
var myDataObject = {
"name": "Monika",
"City": "Delhi",
"Age": 32,
"Contact Number": 33333333
}
// Creating call back function
qhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
document.getElementById("sample").innerHTML = this.responseText;
console.log("Data object Send Successfully")
}
};
// Open the given file
qhttp.open("POST",
"https://jsonplaceholder.typicode.com/todos", true);
// Setting HTTP request header
qhttp.setRequestHeader('Content-type', 'application/json')
// Converting data object to a string
var myData = JSON.stringify(myDataObject)
// Sending the data object to the server
qhttp.send(myData)
}
</script>
<h2>Sending Data object</h2>
<button type="button" onclick="sendDataObject()">Submit</button>
<div id="sample"></div>
</body>
</html>
输出
结论
这就是我们将数据对象发送到服务器并相应地更新响应的方法。它允许我们共享信息和更新数据,而无需刷新整个页面。因此,在下一篇文章中,我们将学习如何解析 XML 对象。