Ajax jQuery Tutorial, Simple Yet Powerful

by

Ajax jQuery Tutorial. Ajax is a programming technique that makes it possible to do data change with the server in the background, so the web page doesn’t need to refresh in order to change the page partially.

Here we go our hero again, jQuery!. By using jQuery, ajax development process is a lot easier.
In this tutorial we will learn how to implement Ajax using jQuery in our web pages. We will create a project to better understanding the topic.

The Project
In this project we will create simple form submitting. Whenever users type their name in the form an then submit it by clicking the submit button. Their name will be shown below the input form without page refresh process :D. By Using this technique our web application is feels like desktop application.

ajaxfirst.php

<html>
   <head>

   	   <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
       <script type="text/javascript">
               $(document).ready(function(){
                     $("#submit").click(function(){

                          var name=$("#name").val();
                          $.ajax({
                            type:"post",
                            url:"getname.php",
                            data:"name="+name,
                            success:function(data){
                              $("#info").html(data);
                            }
                          })
                     });
               });
       </script>
   </head>

   <body>
        <form method="post" action="">
               Name : <input type="text" name="name" id="name"/>
                      <input type="button" name="submit" id="submit" value="Submit"/>
        </form>
        <div id="info" />
   </body>
</html>

and following code is responsible in giving the output that needs to be shown

getname.php

<?php

$name=$_POST["name"];
echo "Thank you ".$name." for Register in our site"

?>

Here is the result

Ajax jQuery Tutorial

Okay, so far we have learn the basic of Ajax using jQuery. In next cool tutorial we will learn how to use this technique to be implemented in database application

9 thoughts on “Ajax jQuery Tutorial, Simple Yet Powerful”

  1. This design is incredible! You certainly know how to keep a
    reader entertained. Between your wit and your videos, I
    was almost moved to start my own blog (well, almost.
    ..HaHa!) Excellent job. I really loved what you had to
    say, and more than that, how you presented it.
    Too cool!

    Reply

  2. Congrats on nice code!

    i’m quite new to ajax, a bit late to the scene.

    Just wondering, do you know that while we are loading json data asynchronously, is it possible to know how much data has been loaded? For example, I want to build a status bar : 356/1000 data loaded, 357/1000 data loaded, and so on?

    Let me know if you can help! I got a couple of questions to ask about ajax. By email if possible!

    Reply

  4. The natural web customer possesses a remarkably short window of curiosity, this is certainly specifically why you will need an excellent
    web site. It also ensures that the website is SEO friendly,
    W3C Validated, and runs smooth on all web browsers.
    Cheap is not necessarily a good thing when it comes to web hosting.

    Reply

  7. You ought to be rather smart in the proper utilization of a payday loan. With each person that gets a loan with them the firm
    takes a gigantic risk as these people possess a record of
    defaulting on loans and store cards. A local company can hand you a check or cash right on the spot.

    Reply

Leave a comment