資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
