Tutorial AJAX and jQuery






In this tutorial we will use jquery, ajax, json and mysql. We are going to create a drop down list with two types of products (expensive and cheap). We will select an option and we will make a ajax request with the type of product. We will recover the database of products that match the product type and will show in a table.

example ajax jquery

See live example clicking here

To create this example we will need: database, index.html, code.js and data.php

Step 1 – Create database

I have created a database called “shop” with a table called “products” with 6 products that have id, type (cheap or expensive) name, description and price:
database mysql

Step 2 – index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tutorial Ajax, jQuery, MySQL - ajax101.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="code.js"></script>

</head>

<body>
<h1>Tutorial Ajax, jQuery, MySQL - ajax101.com</h1>
<form>
<select id="list">
<option value="expensive">expensive</option>
<option value="cheap">cheap</option>
</select>
<input type="button" id="recover" value="Recover products"/>
</form>
<br/>
<table id="tableProducts">
<thead>
<tr><th class="id">Id</th><th class="name">Name</th><th class="description">Description</th><th class="price">Price</th></tr>
</thead>
<tbody id="trProducts">

</tbody>
</table><br/>
</body>
</html>

I created an index.html file with a drop down list with two options (expensive and cheap) and a button to recover. I have also created an empty table.

Step 3 – code.js

$(document).ready(function() {

$("#recover").live("click", function() {
var type = $("#list").val();

var data = {
typeProduct : type
}

$.ajax({
data : data,
url : 'data.php',
global : false,
type : "GET",
dataType : "html",
async : false
}).done(function(result) {

//decode the JSON object received
var data_products = JSON.parse(result);

var dataTable = document.getElementById('trProducts');
dataTable.innerHTML = "";
for (var i in data_products) {
dataTable.innerHTML += "<td>" + data_products[i].id + "</td><td>" + data_products[i].name + "</td><td>" + data_products[i].description + "</td><td>" + data_products[i].price + "</td>";
}
});

});

});

code.js will execute a function every time we click on the button “recover products”. We will obtain the type of product (expensive or cheap) and we will make a ajax request with the type of product to data.php. We will receive the products (data_products) and we will paint in the table.

Step 4 – data.php

<?php
$con = mysql_connect("localhost", "root", "root");

if (!$con) {
die('Could not connect: ' . mysql_error());
}

mysql_select_db("shop", $con);

//we receive the parameter typeProduct
$typeProduct=$_GET["typeProduct"];

$result=mysql_query("SELECT * FROM products WHERE type='$typeProduct'");
$productArray = array();
while ($products=mysql_fetch_assoc($result)) {
$productArray[] = array_map('utf8_encode', $products);
}

//we send the array as JSON object
echo json_encode($productArray);
?>

data.php will receive the type of product (expensive or cheap) and make a query to the mysql database. data.php will return all matching products (JSON format)




 
Leave a Comment
Your comment: