Client.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!--------------------------------------------------------------------------- Example client script for JQUERY:AJAX -> PHP:MYSQL example ----------------------------------------------------------------------------> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <!------------------------------------------------------------------------- 1) Create some html content that can be accessed by jquery --------------------------------------------------------------------------> <h2> Client example </h2> <h3>Output: </h3> <div id="output">this element will be accessed by jquery and this text replaced</div> <input type="button" value="Click me" onclick="cat()"> <input type="button" value="Click me" onclick="dog()"> <script id="source" language="javascript" type="text/javascript"> function cat() { $(function update() { //----------------------------------------------------------------------- // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/ //----------------------------------------------------------------------- $.ajax({ url: 'api.php', //the script to call to get data data: "client=Its", //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]; var three = data[2]; //get name //-------------------------------------------------------------------- // 3) Update html content //-------------------------------------------------------------------- $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname+"<b> Myval: </b>"+three); //Set output element html //recommend reading up on jquery selectors they are awesome // http://api.jquery.com/category/selectors/ } }); }); } function dog() { $(function update() { //----------------------------------------------------------------------- // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/ //----------------------------------------------------------------------- $.ajax({ url: 'api.php', //the script to call to get data data: "client=Flint", //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]; var three = data[2]; //get name //-------------------------------------------------------------------- // 3) Update html content //-------------------------------------------------------------------- $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname+"<b> Myval: </b>"+three); //Set output element html //recommend reading up on jquery selectors they are awesome // http://api.jquery.com/category/selectors/ } }); }); } </script> </body> </html> |
Then we have api.php the database call.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<?php error_reporting(0); //-------------------------------------------------------------------------- // Example php script for fetching data from mysql database //-------------------------------------------------------------------------- $host = "localhost"; $user = "root"; $pass = ""; $databaseName = "ppc"; $tableName = "cmdata"; $client = mysql_real_escape_string($_GET['client']); // $client = "Its"; //-------------------------------------------------------------------------- // 1) Connect to mysql database //-------------------------------------------------------------------------- $con = mysql_connect($host,$user,$pass); $dbs = mysql_select_db($databaseName, $con); //-------------------------------------------------------------------------- // 2) Query database for data //-------------------------------------------------------------------------- $result = mysql_query("SELECT * FROM $tableName where client='$client'"); //query $array = mysql_fetch_row($result); //fetch result //-------------------------------------------------------------------------- // 3) echo result as json //-------------------------------------------------------------------------- echo json_encode($array); ?> |