Get MYSQL Data Into AJAX

Question

I'm an AJAX novice and I'm having major trouble trying to get data out of mySQL and into my javascript function.

What I want to do is loop through my data in php and somehow send that data into various named divs on the page.

Here's the code from my javascript page:

function loadPageContent(){

var projectID = getQuerystring('pid');
var templateID = getQuerystring('t');

xmlHttp=GetXmlHttpObject()

if (xmlHttp==null){
 alert ("Browser does not support HTTP Request")
 return
} 

var url="getImages.php"
url=url+"?projectID="+projectID
url=url+"&templateID="+templateID
xmlHttp.open("GET",url,true);
 xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){ 

document.getElementById("statusdebug1").innerHTML=xmlHttp.responseText;
            }
        }

xmlHttp.send(null);
} 

Here's the code for my php page:

    <?php 

$projectID = $_GET["projectID"];
$templateID = $_GET["templateID"];

include_once('includes/php/conn.php');

$sql ="select * FROM imageSel WHERE projectID='$projectID' AND templateName = '$templateID'";

$results=mysql_query($sql, $link);

if(!($mysql_rs = mysql_query($sql, $link)))
die("Error in executing query");

echo "<script language='JavaScript'>";

while($row =mysql_fetch_assoc($results) ){ 

$imageSelID = $row['imageSelID'];
$templateName = $row['templateName'];
$tNode = $row['box'];
$image = $row['image'];


$sql2 ="select * FROM products WHERE productid='$image'";

if(!($mysql_rs = mysql_query($sql2, $link)))
die("Error in executing query");

//Retrieve values
$row2 = mysql_fetch_array($mysql_rs);

$productname = $row2['productname'];
$subcategoryid = $row2['subcategoryid'];


    $sql3 ="select * FROM subcategory WHERE subcategoryid='$subcategoryid'";

    if(!($mysql_rs = mysql_query($sql3, $link)))
    die("Error in executing query");

    //Retrieve values
    $row3 = mysql_fetch_array($mysql_rs);

    $foldername = $row3['foldername'];
    $foldername = strtolower($foldername);


$theImage = '<img src="images/lowres/' . $foldername . '/' . $productname .'" />';

echo "document.getElementById(".$tNode.").innerHTML=".$theImage.";";

}

echo "</script>";

?>

Answer 1

That's typically not how I would implement AJAX.

AJAX, when done correctly, should send data to the browser, then let the browser decide what to do with it.

Try using json_encode to put the data you want to send to the browser in JSON format, then on the Javascript end use a JSON library to decode the data then handle it appropriately.

Good luck!

Answer 2

Dear bro,

please use this code :

xmlHttp.open("GET",url,false);

because if you are keeping its true then it will call asynchronize ajax.

Please correct if i am wrong.

Answer 3

You are setting the Ajax response to the innerHTML of the div. But you output javascript in your PHP (which becomes your Ajax response). Try outputting just the img tag without the javascript wrapper. Or, even just outputting "Hello world";

EDITED TO ADD: You're using javascript getElementById and innerHtml on the client side and the server side. It's redundant. You probably want to keep it on the client side, ie, your html and javascript