Download Code
- 4 years ago
- Zaid Bin Khalid
- 10963 Views
-
5
In this session, you will learn how to send and receive data on a web server through Ajax. By using an example.
jQuery $.get () and $.post ()Methods
To send and retrieve data from a web server, the two simple methods are used. The jQuery $.get ( ) and $.post ( ) methods. These methods are much similar but different at one major point. The $.get ( ) method make request using the HTTP GET method. And the $.post ( ) method make request using the HTTP POST method.
Syntax
The basic syntax of both methods are given below:
$.get(URL, data, success); —Or— $.post(URL, data, success);
The above syntax has the following parameters and meanings:
- The URL required a specific parameter in which the request is sent.
- The optional success parameter is a callback function. It is used to retrieve the returned data that is executed if the request succeeds.
Performing GET Request with AJAX using jQuery
The method make an Ajax request to the “date-time.php” file by using HTTP GET is called jQuery $.get ( ). With the help of following example, you can simply set the date and time. It return the data from the server. Also, displays on the web browser without refreshing the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("date-time.php", function(data){
// Display the returned data in browser
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<div id="result">
<h2>Content of the result DIV box will be replaced by the server date and time</h2>
</div>
<button type="button">Load Date and Time</button>
</body>
</html>
With the help of another example, you can also send the request of some data to the server. The jQuery code makes an Ajax request with the help of “create-table.php”. It sends some request with additional data to the server.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// Get value from input element on the page
var numValue = $("#num").val();
// Send the input data to the server using get
$.get("create-table.php", {number: numValue} , function(data){
// Display the returned data in browser
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<label>Enter a Number: <input type="text" id="num"></label>
<button type="button">Show Multiplication Table</button>
<div id="result"></div>
</body>
</html>
Performing POST Request with AJAX using jQuery
During work, you can use $.get or $.post method and it depends on your requirement and server-side code. In case you need to use the POST method. You have a large amount of data to be transmitted. As the GET method has a limit on the data transfer.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery post() Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
// Stop form from submitting normally
event.preventDefault();
/* Serialize the submitted form control values to be sent to the web server with the request */
var formValues = $(this).serialize();
// Send the form data using post
$.post("display-comment.php", formValues, function(data){
// Display the returned data in browser
$("#result").html(data);
});
});
});
</script>
</head>
<body>
<form>
<label>Name: <input type="text" name="name"></label>
<label>Comment: <textarea cols="50" name="comment"></textarea></label>
<input type="submit" value="Send">
</form>
<div id="result"></div>
</body>
</html>
With the help of the “display-comment.php” file, the data will show which is entered by the user.
<?php
$name = htmlspecialchars($_POST["name"]);
$comment = htmlspecialchars($_POST["comment"]);
echo "Hi, $name. Your comment has been received successfully." . "";
echo "Here's the comment what you've entered: $comment";
?>
Download Code
- 4 years ago
- Zaid Bin Khalid
- 10963 Views
-
5