如何使用 AJAX 调用传递 JavaScript 变量?
在本教程中，我们将学习如何使用 AJAX 调用传递 JavaScript 变量。
AJAX 代表异步 JavaScript 和 XML。顾名思义，它在您的网页上执行异步操作。AJAX 通过 HTTP 请求与服务器通信，并以 HTTP 响应的形式获取所需数据。我们可以通过使用 AJAX 调用传递 JavaScript 变量来控制这些 HTTP 请求。
HTTP 请求有多种类型，在本教程中，我们将使用 AJAX 讨论最流行的 HTTP 请求，并通过它传递 JavaScript 变量。
使用"GET"AJAX 调用传递 JavaScript 变量
GET 是最常用的 HTTP 请求之一。我们使用 GET 请求从服务器获取一些数据。响应数据可以是各种类型，如 JSON、XML 或文本，甚至是 HTML 页面。
要在 AJAX 中执行 GET 请求，我们需要创建一个新的 XMLHttpRequest 对象。然后我们需要在 open 方法中定义 API 的请求类型和端点，并在 onload 方法中设置一个函数。完成所有配置后，我们需要调用 send 方法来发送 HTTP 请求。当 HTTP 请求完成时，onload 方法将执行。
我们采用的 API 在端点中接受一个参数，即帖子的 ID。我们将使用 JavaScript 变量传递帖子 ID 值，在 AJAX 调用完成后，我们将在网页上显示帖子名称。
语法
用户可以按照以下语法通过"GET"AJAX 调用传递 JavaScript 变量。
// 我们将在 AJAX 调用中传递的 JavaScript 变量
let id = 1
//AJAX 调用
let http = new XMLHttpRequest()
http.open('GET', 'https://jsonplaceholder.typicode.com/posts/' + id)
http.onload = function(){
console.log(this.response); // 响应
}
http.send()
在上述语法中，我们创建了 XMLHttpRequest()，并使用 get 请求从服务器获取数据，最后打印了响应。
示例
在下面的示例中，我们在 API 的 URL 端点中传递了带有 AJAX 调用的 JavaScript 变量。我们将 onclick 事件处理程序与按钮关联，每当用户单击按钮时，AJAX 调用就会执行。
<html> <body> <button onclick = "postLoad()"> Load Post </button> <div id = "root" style = "border: 1px solid black; padding: 1%;"> Post not loaded! </div> <script> function postLoad(){ // JavaScript variable that we will pass in AJAX call let id = 1 //AJAX Call let http = new XMLHttpRequest() http.open('GET', 'https://jsonplaceholder.typicode.com/posts/' + id) http.onload = function(){ let post = JSON.parse(this.response) document.getElementById('root').innerHTML = '<h3>Post Id: '+ post.id +'</h3><h3>TITLE: '+ post.title +'</h3><p>'+ post.body +'</p>' } http.send() } </script> </body> </html>
使用"POST"AJAX 调用传递 JavaScript 变量
POST 是最常用的 HTTP 请求之一。我们使用 POST 请求向服务器提交一些数据，如表单数据。响应数据可以是各种类型，如 JSON、XML 或文本，甚至是 HTML 页面。
要在 AJAX 中执行 POST 请求，我们需要创建一个新的 XMLHttpRequest 对象。然后，我们需要在 open 方法中定义 API 的请求类型和端点，并在 onload 方法中设置一个函数。完成所有配置后，我们需要调用 send 方法，该方法接受一个参数，该参数是将发送到服务器以发送 HTTP 请求的数据。 HTTP 请求完成后，onload 方法将执行。
语法
用户可以按照以下语法通过"POST"AJAX 调用传递 JavaScript 变量。
// 我们将在 AJAX 调用中传递的 JavaScript 变量
let title = 'Tutorialspoint';
//AJAX 调用
let http = new XMLHttpRequest()
http.open('POST', 'https://jsonplaceholder.typicode.com/posts/')
http.onload = function(){
console.log(this.response); // 响应
}
// 在 AJAX 调用中传递变量
http.send(title)
在上述语法中，我们创建了 XMLHttpReqest 并向服务器发出了 post 请求。
示例
在下面的示例中，我们通过 AJAX 调用传递了 JavaScript 变量。我们有一个输入字段和一个与 onclick 事件处理程序关联的按钮，每当用户单击按钮时，就会执行 AJAX 调用，该调用获取输入字段的值并使用 POST 请求将其发送到服务器。
<html> <body> <div> <label for = "title" style = "display: block;"> Title </label> <input id = "title" type = "text" name = "title"> </div> <button onclick="submitPost()"> Submit </button> <div id = "root"> </div> <script> function submitPost(){ // JavaScript variable that we will pass in AJAX call let title = document.getElementById('title').value //AJAX Call let http = new XMLHttpRequest() http.open('POST', 'https://jsonplaceholder.typicode.com/posts/') http.onload = function() { document.getElementById('root').innerHTML = 'Submitted!' } // Passing variable in AJAX Call http.send(title) } </script> </body> </html>
我们已经了解了如何通过两种方式使用 AJAX 调用传递 JavaScript 变量。第一种方法使用 GET 方法，第二种方法使用 POST 方法。在第一种方法中，我们在 API 的 URL 或端点中传递 JavaScript 变量，在第二种方法中，我们以字符串的形式在 send 方法中传递 JavaScript 变量。
