I’m running through a tutorial that is a little dated, but I’ve tried to improve the code and make it up-to-date.
The code is well commented and easy to follow, but I saw use of things like the <b> tag, which I think it deprecated, making me think it was a bit old…. And I also wonder, why is DB.php included, when there’s a connect command, already, in the php file?
Please, have a look at the code and tell me why it isn’t working?
Here is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="/javascript/jquery-1.8.2.js"></script>
<script type="text/javascript" src="phpmysql.js"></script>
</head>
<body>
<!-----------------------------------------------------------------------
1) Create some html content that can be accessed by jquery
------------------------------------------------------------------------>
<h2> Bookstore example </h2>
<h3>Output: </h3>
<div id="output">Will you look at some books?</div>
<button>click</button>
</body>
</html>
And the js:
$(document).ready.(
function ()
{
$("button").click.(function()
{
//---------------------------------------------------------------------
// 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
//---------------------------------------------------------------------
$.ajax({
url: 'form3.php', //the script to call to get data
data: "", //you can insert url argumnets here to pass to api.php
//for example "id=5&parent=6"
dataType: 'json', //data format
success: function(data) //on recieve of reply
{
var id = data[0]; //get id
var vname = data[1]; //get name
//------------------------------------------------------------------
// 3) Update html content
//------------------------------------------------------------------
$('#output').html("<p>Title: </p>"+id+"<p> Content: </p>"+vname); //Set output element html
}
});
});
});
And the php:
<?php
//--------------------------------------------------------------------------
// Example php script for fetching data from mysql database
//--------------------------------------------------------------------------
$host = "localhost";
$user = "username";
$pass = "password";
$databaseName = "auto_try";
$tableName = "books";
//------------------------------------------------------------------------
// 1) Connect to mysql database
//------------------------------------------------------------------------
include 'DB.php';
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);
//------------------------------------------------------------------------
// 2) Query database for data
//------------------------------------------------------------------------
$result = mysql_query("SELECT * FROM $tableName"); //query
$array = mysql_fetch_row($result); //fetch result
//------------------------------------------------------------------------
// 3) echo result as json
//------------------------------------------------------------------------
echo json_encode($array);
your js jquery function was wrong try this,there is no
.after ready or click