 |
| AJAX for Beginners |
Ajax for Beginners What is Ajax and It use's:: AJAX Stand's for Asynchronous JavaScript and XML.Ajax is a New Technique for Creating Website User Friendly,Attractive,Dynamic and Faster With Help of XML,HTML,CSS and JavaScript. Some Uses of Ajax..
1.Update a Webpage Without Reload the Page
2.Request Data from a Server after the page has loded
3.Recive Data from a server after the page has loded
4.Send data to a server in the background.
5.Live Search,Insert,Delete Data Without Page Refreshing.
6.Live Voting System and Much more...
1.Creating First Ajax Application:
Our First AJAX Lesson we will learn how to get data from a html form uisng Ajax. Download Jquery_latest.js from Jquery Websitehttps://jquery.com/download/
Now Create
index.html page
<html> <head> <title>AJAX for Beginners</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head> <form method="POST" action=""> <span>UserName:</span><br/> <input type="text" id="username"/><br/> <span>Email:</span><br/> <input type="text" id="email"/><br/> <button type="submit" id="submit">Submit</button> </form> </html>
Now Create script.js page...
$(document).ready(function(){
$("#submit").click(function(){
//Validating Fields by ID
var username= $("#username").val();
var email =$("#email").val();
//Checking Empty Fields
if(username==""||email==""){
alert("UserName and Email are Mandatory Fields");
}else{
//Alert Submited UserName and Email
alert(username);
alert(email);
}
});
});
Now You have Successfully Created your First Ajax Application.
2. AJAX and PHP Application (Retrive Data from PHP and HTML Form Page Without Page Refreshing):
In this lesson we will Learn how to Retrive data from php page without Refreshing the Page. What You will Need...1.index.html
2. script.js
3. test.php
4. jquery.js (Download it from jquery official website or google it.) Now copy the below codes..
1.index.html....
<html> <head> <title>AJAX for Beginners</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head> <form method="POST" action=""> <span>UserName:</span><br/> <input type="text" name="username" id="username"/><br/> <span>Email:</span><br/> <input type="text" name="email" id="email"/><br/> <button type="submit" id="submit">Submit</button> </form> <div id="success"></div> </html>
2.script.js
$(document).ready(function(){
$("#submit").click(function(){
var username=$("#username").val();
var email=$("#email").val();
if(username==""||email==""){
alert("Fields are Mandatory");
}else{
$.ajax({
url:"test.php",
type:"POST",
data:{username:username,email:email},
success: function(data){
$("#success").html(data);
}
});
return false;
}
});
});
3.test.php
<?php $name=$_POST['username']; $email=$_POST['email']; echo "<strong>Your Name:</strong> $name<br/>"; echo "<strong>Your Email:</strong> $email"; ?>Now run the index.html page from localhost and Enjoy..
3.Simple Calclutor in AJAX and PHP
In this lesson we will learn how to create a simple calclutor using php and ajax. you will need 4 files ::1.index.html
2.script.js
3.test.php
4.jquery_latest.js Now copy The below codes and save it to your desired folder in xampp/htdocs folder.
1.index.html
<html> <head> <title>AJAX for Beginners</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script.js"></script> </head> <form method="POST" action=""> <span>Number 1:</span><br/> <input type="text" name="number1" id="number1"/><br/> <span>Number 2:</span><br/> <input type="text" name="number2" id="number2"/><br/> <button type="submit" id="submit">Calculate</button> </form> <div id="success"></div> </html>
2.script.js
Now in this script we will call test.php file uisng ajax commands to retrive data from html form..
$(document).ready(function(){
$("#submit").click(function(){
var number1=$("#number1").val();
var number2=$("#number2").val();
if(number1==""||number2==""){
alert("Fields are Mandatory");
}else{
$.ajax({
url:"test.php",
type:"POST",
data:{number1:number1,number2:number2},
success: function(data){
$("#success").html(data);
}
});
return false;
}
});
});
3.test.php
<?php
$number1=$_POST['number1'];
$number2=$_POST['number2'];
if($number1<$number2){
echo "Number1 Must be Greater Than Number2";
}else{
?>
<strong>Your 1st number:</strong> <?php echo $number1;?><br/>
<strong>Your 2nd number:</strong> <?php echo $number2;?><br/>
<strong>Multiplication:</strong> <?php echo ($number1*$number2);?><br/>
<strong>Multiplication:</strong> <?php echo ($number1/$number2);?><br/>
<strong>Addition:</strong> <?php echo ($number1+$number2);?><br/>
<strong>Substraction:</strong> <?php echo ($number1-$number2);?><br/>
<?php }?>
Now run the index.html from localhost and enjoy.
i hope this codes will help you to understand basic concept of ajax.. Thank you for Reading my Random English.... Please Don't forget to comment...
Incoming Search Terms..
ajax tutorial for beginners,ajax,jquery ajax,jquery ajax example,ajax tutorial,ajax Examples,Ajax php post method,php ajax tutorials
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.