How to display mysql DB with ajax.

**spyderfusion02** · 05-07-2009 01:31 PM

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.

**A1ien51** · 05-07-2009 04:22 PM

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

**spyderfusion02** · 05-07-2009 06:08 PM

Any ideas on how I can simply do this?

**A1ien51** · 05-07-2009 07:19 PM

What serverside language can you use?

Eric

**spyderfusion02** · 05-07-2009 09:15 PM

ajax

**ZeroKilled** · 05-07-2009 09:21 PM

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...

**spyderfusion02** · 05-07-2009 09:39 PM

oh, in that case I guess PHP would be best.

**A1ien51** · 05-08-2009 09:12 AM

Well I would start out by doing this:
http://www.google.com/search?q=mysql+php+ajax+tutorial

Eric

**spyderfusion02** · 05-08-2009 09:23 AM

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).

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>

PHP File:

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;

?>

Any help would be great, Thank you.

**A1ien51** · 05-08-2009 09:51 AM

Something like this:

Code:

$('.submit').click(function(){
    $.get("test.php", { "foo" : "bar" },
        function(data){
            $('myDiv').html(data).slideDown();
        });
});

**spyderfusion02** · 05-08-2009 04:23 PM

That didn't seem to work. Here is what I put it as:

Code:

	<script type="text/javascript">		
		$('.submit').click(function(){
		    $.get("ajax-example.php", { "foo" : "bar" },
		        function(data){
		            $('ajaxDiv').html(data).slideDown();
		        });
		});

What is "foo" and "bar" supposed to be for?

**A1ien51** · 05-08-2009 05:00 PM

read JQuersy's documentation. It is the parameters you want to post to the server.

Eric

Thread: How to display mysql DB with ajax.

Thread Tools

Display

How to display mysql DB with ajax.

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions