What is Ajax? How to send the request using different Jquery methods?

|
| By Webner

What is Ajax? How to send the request using different Jquery methods?
Ajax: Ajax stands for Asynchronous JavaScript and XML. Ajax is a technique for creating fast and dynamic web pages. Ajax allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Index.php: Request for data:

<html>
<head>
<title>Request for data</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ok').click(function(){
var userdata= $('#email').val();

//first method
$.post("request.php",{ email : userdata } ,function(data){
$('#result').html(data);
});
});
});
</script>
</head>
<body>
Enter the email<input  type="text" name="email" id="email" />
<input type="submit" value="ok"  id="ok"/>
<div id="result"></div>
</body>
</html>

request.php:

<?php
echo  $_POST[’email’];
?>

Output:
1

1. Sending multiple parameters:

Index.php:

<html>
<head>
<title>Sending multiple data for data</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ok').click(function(){
var email= $('#email').val();
var password= $('#password').val();
$.post("request.php",{ email:email,password:password } ,function(data){
$('#result').html(data);
});
});
});
</script>
</head>
<body style="margin-top:100px;">
<center>
Enter the email<input  type="text" name="email" id="email" /><br><br>
Enter the password<input type="password" name="password" id="password"/>
<input type="submit" value="ok"  id="ok" />
<div id="result" style="margin-top:50px;"></div>
</center>
</body>
</html>

request.php:

span style="font-weight: 400;"><?php
echo  $_POST['email'];
echo $_POST['password'];
?>

Output:
2

2. Second Method:

index.php: Sending multiple data for data:

<html>
<head>
<title>Sending multiple data for data</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ok').click(function(){
var email= $('#email').val();
var password= $('#password').val();
//Second method
$.ajax({
     url:'request.php',
     data:{ email :email,password:password },
     type:'POST',
     success:function(data){
     $('#result').html(data);
     }
});
});
});

</script>
</head>
<body style="margin-top:100px;">
<center>
Enter the email:<input  type="text" name="email" id="email" /><br></br>
Enter the password:<input type="password" name="password" id="password" />
<input type="submit" value="ok"  id="ok"/>
<div id="result" style="margin-top:50px;"></div>
</center>
</body>
</html>

request.php:

<?php
echo $_POST['email'];
echo $_POST['password'];
?>

Output:
3

2.1.Sending all the form data: Sending multiple data for data

<html>
<head>
<title>Sending multiple data for data</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#form').submit(function(){
//send all form data
var formData = $(this).serialize();
$.ajax({
     url:'request.php',
     data:formData,
     type:'POST',
     success:function(data){
     $('#result').html(data);
     }
});
});
});
</script>
</head>
<body style="margin-top:100px;">
<center>
<form id="form">
Enter the email:<input  type="text" name="email" id="email" /><br></br>
Enter the password:<input type="password" name="password" id="password" />
<input type="submit" value="ok"  id="ok"/>
<div id="result" style="margin-top:50px;"></div>
</form>
</center>
</body>
</html>

request.php:

<?php
echo $_POST['email'];
echo $_POST['password'];
?>

Output:
4

Leave a Reply

Your email address will not be published. Required fields are marked *