SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Beginner JQuery and AJAX Tutorial

    So you want to try AJAX? Here we will use JQuery with PHP (Download it from jquery.com) and it's really easy:

    1. First lets make a form so that when you submit it, Javascript will grab all the fields.. All of this will be done in a file called index.html until we get to the PHP page.

    Code HTML4Strict:
    <form id="info">
    	Name: <input type="text" name="name" /><br />
    	Age: <input type="text" name="age" /><br />
    	Color: <input type="text" name="color" /><br />
    	<input type="submit" />
    </form>
     
    <div id="output"></div>
    2. Looks good, now lets make JQuery do something with it. You have to include JQuery before you use it, so you'll have something like this in your <head></head> tags:
    Code HTML4Strict:
    <script type="text/javascript src="jquery.js" />

    3. Now lets create the standard document ready:
    Code JavaScript:
    <script type="text/javascript">
    $(document).ready(function() {
     
    	// Everything will go here.
     
    });
    </script>
    4. Now let's make the submit happen, remember the ID of the form was info, so.. You also want to return false inside so that the server doesn't actually refresh the page.
    Code JavaScript:
    <script type="text/javascript">
    $(document).ready(function() {
     
    	$("#info").submit(function() {
    		// Now we do something in here after the form submits.
     
    		return false;
    	});
     
    });
    </script>

    5. Everything looks pretty good so far, time for the AJAX! We'll be using $.post, to post data.
    Code JavaScript:
    <script type="text/javascript">
    $(document).ready(function() {
     
    	$("#info").submit(function() {
     
    		// We serialize the post form, this grabs all the post values in the form.
    		var info = $(this).serialize();
     
    		// We are posting to test.php, and we pop in the serialized info var to go to the server.
    		// the last parameter is the callback, and with this we output stuff.
    		// So it goes: $.post(PAGE, DATA_TO_POST, WHAT_TO_DO_WHEN_DONE(variable_from_page_data) {}
    		//
    		$.post('test.php', info, function(data) {
     
    				// now we gotta write the php before we mess with this!
     
    		});
     
    		return false;
    	});
     
    });
    </script>

    6. Make a test.php page and let's put in:
    PHP Code:
    <?php

    $name 
    $_POST['name'];
    $age $_POST['age'];
    $color $_POST['color'];

    // You could have a bunch of stuff go on here, save to a database, validate your data (which you should),
    // and a conditional statement could echo out the results.
    // Important: You want to echo the results, not just return them!
    echo "You posted your name as <b>$name</b>, age <b>$age</b>, and favorite color as <b>$color</b>";

    7. Okay now back to the javascript part!
    Code JavaScript:
    <script type="text/javascript">
    $(document).ready(function() {
     
    	$("#info").submit(function() {
     
    		var info = $(this).serialize();
     
    		$.post('test.php', info, function(data) {
     
    				// We not pop the output inside the #output DIV.
    				$("#output").html(data);
     
    		});
     
    		return false;
    	});
     
    });
    </script>

    8. Final Results:

    index.html

    Code HTML4Strict:
    <html>
    <head>
    	<script type="text/javascript" src="jquery.js"></script>
     
    	<script type="text/javascript">
    	$(document).ready(function() {
     
    		$("#info").submit(function() {
     
    			var info = $(this).serialize();
     
    			$.post('test.php', info, function(data) {
     
    					// We not pop the output inside the #output DIV.
    					$("#output").html(data);
     
    			});
     
    			return false;
    		});
     
    	});
    	</script>
    </head>
    <body>
     
    <form id="info">
    	Name: <input type="text" name="name" /><br />
    	Age: <input type="text" name="age" /><br />
    	Color: <input type="text" name="color" /><br />
    	<input type="submit" />
    </form>
     
    <div id="output"></div>
     
    </body>
    </html>

    test.php
    PHP Code:
    <?php

    $name 
    $_POST['name'];
    $age $_POST['age'];
    $color $_POST['color'];

    echo 
    "You posted your name as <b>$name</b>, age <b>$age</b>, and favorite color as <b>$color</b>";


    So what next? Dissect the code and get familiar with it!.
    You can do a lot more, but starting with something simple to work with can propel you much further because it's a great source of motivation :P

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice. Good job!
    From the English nation to a US location.

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can anyone give me an example of an ajax page where it is shown how to connect with database and insert data into MySQL database?

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this w3schools tutorial shows how to use ajax to retrieve records form a database.

    To insert data is the same principle but instead of doing a select in your php script you do an insert.

    My suggestion would be to learn how to use ajax with plain vanilla javascript before messing with JQuery and potentially making things much more complicated than they need to be.

  5. #5
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you wanted to insert data into a Database, you'd add your connections in step 6 (in the php file) with mysqli_connect(), mysqli_query(), and pop in the data there. But if you dunno how to use MySQL yet it might be tricky HEHE, id read that W3 tutorial the guy suggested


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •