Passing JavaScript Variable To PHP Using Ajax
Last Updated : Mar 11, 2024
IN - PHP JavaScript Ajax | Written & Updated By - Pragati
In this article we will show you the solution of passing JavaScript variable to PHP using ajax, client-side scripts are written in JavaScript, while server-side scripts are written in PHP. Requests can pass JavaScript variables to PHP.
PHP can be told what JavaScript variables to pass through a request. PHP's POST and GET actions to allow access to contents' forms.
JavaScript and XML are the components of AJAX.
Asynchronous operations are performed on your website asynchronously. In AJAX, HTTP requests are sent to the server, and HTTP responses are received over the server. JavaScript variables can be passed with AJAX calls to control HTTP requests.
HTTP Requests such as GET are frequently used. Data can be retrieved from a server using a GET request. There are many types of response data, including JSON, XML, and text, as well as HTML.
Step By Step Guide On Passing JavaScript Variable To PHP Using Ajax :-
<!DOCTYPE html>
<html>
<body>
<h2>TalkersCode variable to php using ajax</h2>
<h3>Lets Start</h3>
<p>Options <span id="txtHint"></span></p>
<p>Your name: <input type="text" id="txt1" onkeyup="showHint(this.value)"></p>
<script>
Function showHint(str) {
if (str.length == 0) {
Document. GetElementById("txtHint"). InnerHTML = "";
Return;
}
Const xhttp = new XMLHttpRequest ();
xhttp. onload = function () {
document. getElementById("txtHint"). innerHTML =
this. response Text;
}
xhttp. open ("GET", "gethint.php?q="+str);
xhttp. send();
}
</script>
</body>
</html>
- In our first step, we write <HTML>, which tells the browser what HTML version we're using. Documents in HTML begin with tags.
- To define the body of the webpage, the <body> tag is used. All content is written here
- Using the <head> tag, we will explain the project's heading.
- then we use <p> tag for a paragraph in the program.
- then we create an HTTP request object.
- There is a striking similarity between the span> and div> elements, although div> is an element at the block level, whereas span> is an element at the inline level.
- It can be added to an HTML page with a <script> tag. The script tag explains the source code.
- We use the XMLHttpRequest object as the keystone of AJAX. ... const xhttp = new XMLHttpRequest (); ... getResponseHeader (), Returns specific header information.
- After that </script></body></html> and code should be executed after closed all tags.
Conclusion :-
An XMLHttpRequest object is required to perform a GET request in AJAX. A function must be set up in the onload method after defining the request type and API endpoint in the open method.
When we have finished configuring, we can send the HTTP request by calling the send method. In response to a successful HTTP request, the onload method will be invoked.
I hope this article on passing JavaScript variable to PHP using ajax helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
