Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to pass JavaScript Variables with AJAX calls?
In this tutorial, we will learn how to pass JavaScript Variables with AJAX calls.
AJAX stands for Asynchronous JavaScript and XML. As the name suggests, it performs asynchronous operations on your web page. AJAX communicates with the server by HTTP requests and gets the required data as an HTTP response. We can control these HTTP requests by passing the JavaScript variables with AJAX calls.
There are various types of HTTP requests, and in this tutorial, we will discuss the most popular HTTP requests by using AJAX and also pass JavaScript variables with it.
Pass JavaScript Variables with “GET” AJAX calls
The GET is one of the most used HTTP Requests. We use GET requests to fetch some data from the server. The response data can be of various types like JSON, XML or text, or even an HTML page.
To perform a GET request in AJAX, we need to create a new object of XMLHttpRequest. Then we need to define the request type and Endpoint of the API in the open method and set up a function in the onload method. After all the configurations, we need to call the send method to send the HTTP request. The onload method will execute when the HTTP request is completed.
The API we have taken takes a parameter in the endpoint, and that is the id of a post. We will pass the post id value using the JavaScript variable, and after completion of the AJAX call, we will display the post name on the web page.
Syntax
Users can follow the below syntax to pass JavaScript Variables with “GET” AJAX calls.
// 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()
In the above syntax, we have created the XMLHttpRequest(), and getting the data from the server using the get request, and we have printed the response at last.
Example
In the below example, we have passed JavaScript Variables with AJAX calls in the URL endpoint of the API. We have associated an onclick event handler with a button, and whenever a user clicks on the button AJAX call will perform.
<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>
Pass JavaScript Variables with “POST” AJAX calls
The POST is one of the most used HTTP Requests. We use POST requests to submit some data to the server, like form data. The response data can be of various types like JSON, XML or text, or even an HTML page.
To perform a POST request in AJAX, we need to create a new object of XMLHttpRequest. Then we need to define the request type and endpoint of the API in the open method and set up a function in the onload method. After all of the configurations, we need to call the send method, which takes a parameter that is the data that will be sent to the server to send the HTTP request. The onload method will execute when the HTTP request is completed.
Syntax
Users can follow the below syntax to pass JavaScript Variables with “POST” AJAX calls.
// 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)
In the above syntax, we have created the XMLHttpReqest and making a post request to the server.
Example
In the below example, we have passed JavaScript Variables with AJAX calls. We have an input field and a button associated with an onclick event handler, and whenever a user clicks on the button, an AJAX call will perform that takes the input field’s value and sends it to the server using a POST request.
<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>
We have learned how to pass JavaScript Variables with AJAX calls in two ways. The first way uses the GET method and the second way uses the POST method. In the first approach, we pass the JavaScript variables in the URL or endpoint of the API, and in the second approach, we pass the JavaScript variables in the send method in the form of a string.
7K+ Views
