Hello,
I have been trying to grab a mysql database and display it on a page using ajax/javascript. That's all i need to do for now but I have no clue on how to do it.
Any help would be awesome. Thank you.
Printable View
Hello,
I have been trying to grab a mysql database and display it on a page using ajax/javascript. That's all i need to do for now but I have no clue on how to do it.
Any help would be awesome. Thank you.
JavaScript can not access the database. You need a serverside language to do that. You can call the serverside page through the XMLHttpRequest and get to the database that way.
Eric
Any ideas on how I can simply do this?
What serverside language can you use?
Eric
ajax
ajax isn't a server side language. even ajax isn't a language! Al1en51 asked you was which server side: PHP, ASP, Ruby, JSP, etc...
oh, in that case I guess PHP would be best.
Well I would start out by doing this:
http://www.google.com/search?q=mysql+php+ajax+tutorial
Eric
I did a tutorial on this topic which seems to work fine, however I just need the info I grab from the database to slide down using jQuery.
Here is the script, i'm just not sure what value to put in the jQuery script after the click function for the slidedown effect (line 8).
PHP File:Code:<html>
<head>
<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script
<script type="text/javascript">
$(function(){
$('.submit').click(function(){
$('').slideDown('slow');
});
});
</script>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<div class='main-form'>
<form name='myForm'>
Max Age: <input type='text' id='age' /> <br />
Max WPM: <input type='text' id='wpm' />
<br />
Sex: <select id='sex'>
<option value='m'>m</option>
<option value='f'>f</option>
</select>
<div class="submit"><input type='button' onclick='ajaxFunction()' value='Query MySQL' /></div>
</div>
</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>
Any help would be great, Thank you.PHP Code:<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "root";
$dbname = "ajax_demo";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass);
//Select Database
mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example WHERE ae_sex = '$sex'";
if(is_numeric($age))
$query .= " AND ae_age <= $age";
if(is_numeric($wpm))
$query .= " AND ae_wpm <= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>";
$display_string .= "<th>WPM</th>";
$display_string .= "</tr>";
// Insert a new row in the table for each person returned
while($row = mysql_fetch_array($qry_result)){
$display_string .= "<tr>";
$display_string .= "<td>$row[ae_name]</td>";
$display_string .= "<td>$row[ae_age]</td>";
$display_string .= "<td>$row[ae_sex]</td>";
$display_string .= "<td>$row[ae_wpm]</td>";
$display_string .= "</tr>";
}
echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;
?>
Something like this:
Code:
$('.submit').click(function(){
$.get("test.php", { "foo" : "bar" },
function(data){
$('myDiv').html(data).slideDown();
});
});
That didn't seem to work. Here is what I put it as:
What is "foo" and "bar" supposed to be for?Code:<script type="text/javascript">
$('.submit').click(function(){
$.get("ajax-example.php", { "foo" : "bar" },
function(data){
$('ajaxDiv').html(data).slideDown();
});
});
read JQuersy's documentation. It is the parameters you want to post to the server.
Eric
