数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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 请求。onload 方法将在 HTTP 请求完成后执行。
我们使用的 API 在端点中获取一个参数，即帖子的 ID。我们将使用 JavaScript 变量传递帖子 ID 值，并在 AJAX 调用完成后，我们将帖子名称显示在网页上。
语法
用户可以按照以下语法使用“GET”AJAX 调用传递 JavaScript 变量。
// 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(){
console.log(this.response); // the 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 请求。onload 方法将在 HTTP 请求完成后执行。
语法
用户可以按照以下语法使用“POST”AJAX 调用传递 JavaScript 变量。
// JavaScript variable that we will pass in AJAX call
let title = 'Tutorialspoint';
//AJAX Call
let http = new XMLHttpRequest()
http.open('POST', 'https://jsonplaceholder.typicode.com/posts/')
http.onload = function(){
console.log(this.response); // the response
}
// Passing variable in AJAX Call
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 变量。
9K+ 浏览量
