How To Call PHP Function From JavaScript 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 how to call PHP function from JavaScript using ajax, unlike JavaScript, which is largely used on the client side, PHP is used on the server.
The server receives a request from the browser whenever you wish to access a page, processes it, and produces some output by executing the PHP code.
We will now discuss the idea of using ajax to invoke a php function using javascript.
Step By Step Guide On How To Call PHP Function From JavaScript Using Ajax :-
Data produced inside a browser can be used to call a PHP code using AJAX. Several websites refresh specific sections of their pages using AJAX instead of reloading the entire page.
When properly implemented, it may greatly enhance the user experience.
Remember that the server itself will continue to run the PHP code. Simple data from our script will be all we need to give it.
HTML Code:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title> How to call php function from javascript using ajax
</title>
<style>
body {
font-family: 'Lato';
font-weight: 400;
font-size: 1.4rem;
}
p {
text-align: center;
margin-bottom: 4rem;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p class="unbroken"> A JavaScript library with many of features, jQuery is quick and compact.</p>
<p class="broken"></p>
<script>
$.ajax({
method: "POST",
url: "wrap.php",
data: { text: $("p.unbroken").text() }
})
.done(function( response ) {
$("p.broken").html(response);
});
</script>
</body>
</html>
PHP Code:
<?php $text = $_POST['text']; $output = wordwrap($text, 60, "<br>"); echo $output; ?>
- As you can see, this page has two different types of codes: HTML and PHP.
- A TITLE tag is used in the HTML code's opening HTML & Head tags to define the title for web page.
- Next, we add styling with the aid of CSS using the STYLE tag.
- For the body element's style, we utilise the font-family, font-weight, and font-size, while the P element's text align and margin.
- After that, we wrap up with style and use script to import the jquery library.
- Then, using the BODY element, we begin the real code that will be shown on the website.
- We use a P tag with an unbroken class to write some content in the body. Another P tag with a broken class is then used.
- After that, we begin the script.
- The ajax() function is used in scripts, and it accepts one or two parameters. When two arguments are passed, the URL of a website to which the browser will submit your request is the first one.
- Next, the HTTP method that should be utilised to submit the request is specified using the method argument.
- Then we utilise the link with the value of a php file.
- A text in form is then used, and it is written in a class of p without any breaks.
- Next, we employ the done method, which returns a response for the broken class of p.
- The SCRIPT, BODY, and HTML elements are used to close out our HTML code.
- Now, using basic AJAX requests in PHP code, we call the wordwrap() function in a PHP file after passing data to it.
- In order to transmit the data back to the browser, we then utilise echo.
Conclusion :-
Thus, we have successfully mastered the idea of using ajax to call a php function from a javascript script.
We also discovered that JavaScript often runs in browsers and PHP typically runs on servers.
You cannot just call functions through one languages inside the other & expecting the code to function because they both operate at separate times.
Yet, there are solutions to the problem that enable communication between PHP & JavaScript.
I hope this article on how to call PHP function from JavaScript using ajax helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
