How To Use Ajax In PHP With jQuery
Last Updated : Mar 11, 2024
IN - jQuery PHP | Written & Updated By - Riya
In this article we will show you the solution of how to use ajax in php with jquery, by using AJAX, web pages can be updated without reloading entirely by transferring data with a server.
Today, using PHP, we'll investigate the AJAX idea. You can increase the user interface of your programme and the overall user experience by using the AJAX approach.
Step By Step Guide On How To Use Ajax In PHP With jQuery :-
AJAX, which stands for Asynchronous JavaScript and XML, enables asynchronous content retrieval from a back-end server without requiring a page refresh.
As a result, you can edit a web page's content without having to reload it.
To better understand how AJAX may be used in routine application development, let's look at an example.
Consider the scenario where you want to create a page that shows a user's profile details, including sections for personal details, current affairs, reminders, messaging, and so on.
Typically, different web pages would be created for each section. As an illustration, consumers might click this social information link for reload their browser and show the social information page.
The user must wait for such browser to reload as well as the page to render each time, which makes switching between sections slower as a result.
However, you could alternatively create an interface with AJAX that gets all the data without reloading the page.
In this scenario, you can show various tabs for every area, and when you click on a tab, the associated content is fetched as from back-end server as well as the page is updated without requiring a browser refresh.
Here is a quick rundown of the standard AJAX flow:
- The user starts by making a standard synchronous request to open a web page.
- In order to send an asynchronous request to the back-end server, the user clicks on an element on the DOM, typically a button or link. Due to the fact that the call is done asynchronously without refreshing the browser, the end user won't be aware of this. However, a programme like Firebug can help you identify these AJAX requests.
- The server might return HTML string data, JSON, or XML data throughout response here to AJAX request.
- Parsing the response data is done using JavaScript.
- The DOM of the web page is then updated with the parsed data.
- As you can see, real-time data from of the server is updated on the website without requiring a browser reload.
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<form id="loginform" method="post">
<div>
Username:
<input type="text" name="username" id="username" />
Password:
<input type="password" name="password" id="password" />
<input type="submit" name="loginButton" id="loginButton" value="Login" />
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#loginform').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: 'login.php',
data: $(this).serialize(),
success: function(response)
{
var jsonData = JSON.parse(response);
if (jsonData.success == "1")
{
location.href = 'my_profile.php';
}
else
{
alert('Invalid Credentials!');
}
}
});
});
});
</script>
</body>
</html>
Login.php
<?php
if (isset($_POST['username']) && $_POST['username'] && isset($_POST['password']) && $_POST['password']) {
echo json_encode(array('success' => 1));
} else {
echo json_encode(array('success' => 0));
}
- Our code begins with HTML and HEAD tags.
- After that, we use script to import the JQuery library.
- Next, we begin writing the actual code.
- After that, we utilise the POST method to create the form, adding the login, password, and submit button, which activates when a user hits it.
- We then begin our script.In script we use ready() method to execute our jquery code.
- Next, we use the function for submission.
- Next, the e.preventDefault() method is used.
- Next, we use AJAX; after starting the AJAX call, the login.php code receives the form data asynchronously using the POST method.
- Following that, we parse the server response using the JSON object's parse method.
- Next, we construct a variable to check the user's login information.
- We employ an if statement.
- Finally, we use SCRIPT, BODY, and HTML elements to wrap up our code.
- You can view the login.php file's appearance after the code.
Conclusion :-
Consequently, we have successfully acquired the knowledge necessary to use ajax with jQuery in PHP.
We also covered the fundamentals of AJAX and discussed how it functions with PHP applications.
We see an illustration of how to retrieve PHP content from a server using AJAX.
I hope this article on how to use ajax in php with jquery helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
