jquery ajax use and tutorial for beginners with examples step by step

HTML, PHP 0 Comments
tutorial-for-ajax-php

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.

Daily Visit GK on myshort.in

$.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

share..Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn0