jquery ajax use and tutorial for beginners with examples step by step
Technology 0 Comments
Ajax used for without refresh action performs such as without refresh insert the data in Database and reload the content without refresh. The First tutorial for jquery ajax with example start now.
How to used jQuery – AJAX get() and post() Methods
Use of get() and post() methods is send and received request data from the server with an HTTP GET or POST with URL and string.
$.post(“action.php”,function(data){})
$.get(“action.php”,function(data){})
jQuery ajax $.post() Method Syntax:
Syntax : $.post(URL,data,callback); or $.get(URL,data,callback);
Step 1
$(document).ready ()
$(document).ready (function() {});
Start code :
$(document).ready (function() {
Main Code start in this curly brackets
In document place we can also used ID, Class, event and other object
});
Or
$( function(){
Main Code started in this curly brackets
});
Step 2
$(document).ready(function(){
$(“#sub”).click(function() {
.click is event and now starts
And start now ajax request
#sub = is ID name of submit input type or button
For ex <input type=”submit” value=”submit” name=”sub” id=”sub”/>
});
});
Step 3
$(document).ready(function(){
$(“#sub”).click(function() {
Start ajax request
$.post(“action.php”); in this brackets we can pass 2 to 3 parameters
});
});
Step 4
$(document).ready(function(){
$(“#sub”).click(function() {
$.post(“action.php”,function(data){
Meaning of this function(data)
1 Store the all data in this fuction(data) variable
2 fuction(data) = we can set any variable name for ‘data’ variable such as
Text, number etc
});
});
});
Step 5
$(document).ready(function(){
$(“#sub”).click(function() { // onclick button
$.post(“action.php”,function(data){
$(“#result”).html(data);
Or you can also used $(“#result”).text(data);
Work for $(“#result”).= #result this id through data show in div
Ex <div id=”result” ></div>
html(data); Meaning for this function is data variable fetch the data in HTML form in this faction date variable through (function(data))
});
});
});
Full program Check Now
First page is index.php
<html>
<head>
<title>The jQuery Example</title>
<script type = “text/javascript” src = “https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script type = “text/javascript” >
// Jquery synatx
$(document).ready(function(){
$(“#sub”).click(function() {
$.post(“action.php”,function(data){
$(“#result”).html(data);
});
});
});
</script>
</head>
<body>
<div class=”container”>
<div class=”main”>
<form method=”POST” name=”form” action=””>
<input type=”text” name=”date” value=”” id=”date”/> <br />
<input type=”button” value=”submit” name=”sub” id=”sub”/>
</form>
</div>
<div id=”result” ></div>
</div>
</body>
</html>
Second page is action.php
<?php
echo “hi hello”;
?>
Download all file with example
Buy online Rajasthan gk book Railway JE CBT REET PAtwari Book SSC CGL Clerk GD Book Buy online Rajasthan gk book Railway JE CBT REET PAtwari Book SSC CGL Clerk GD Book
0
0
0