www.webdeveloper.com
Results 1 to 12 of 12

Thread: How to display mysql DB with ajax.

  1. #1
    Join Date
    Mar 2009
    Posts
    31

    How to display mysql DB with ajax.

    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.

  2. #2
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  3. #3
    Join Date
    Mar 2009
    Posts
    31
    Any ideas on how I can simply do this?

  4. #4
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    What serverside language can you use?

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  5. #5
    Join Date
    Mar 2009
    Posts
    31
    ajax

  6. #6
    Join Date
    May 2006
    Location
    Odenton, MD
    Posts
    1,449
    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...
    my mom is javascript, dad is javascripter, granpa is javascriptor, and my little sister is javasRidiculous.
    my nature language is javascript, then come spanish and english -- me

  7. #7
    Join Date
    Mar 2009
    Posts
    31
    oh, in that case I guess PHP would be best.

  8. #8
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Well I would start out by doing this:
    http://www.google.com/search?q=mysql+php+ajax+tutorial

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  9. #9
    Join Date
    Mar 2009
    Posts
    31
    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.

  10. #10
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    Something like this:

    Code:
    $('.submit').click(function(){
        $.get("test.php", { "foo" : "bar" },
            function(data){
                $('myDiv').html(data).slideDown();
            });
    });
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

  11. #11
    Join Date
    Mar 2009
    Posts
    31
    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?

  12. #12
    Join Date
    May 2003
    Location
    Between Baltimore and DC
    Posts
    3,579
    read JQuersy's documentation. It is the parameters you want to post to the server.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint] | twitter | linkedin | http://www.pascarello.com

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles