How to display image from MySQL in Intel-xdk using php

Question

How to display image from MySQL in Intel-xdk using php. Please how can i display image in Intel xdk using ajax request? I have tried to retrieve an information which only displays the text and not the images. I use php and when i request the information only the text is being displayed. Here is the code i used to retrieve the data

   function showUser() {

                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }

                xmlhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById("list").innerHTML = this.responsetext;

                    }
                };
                xmlhttp.open("GET", "http://localhost/SaltCity/index.php",true);
                xmlhttp.send()  
            }

Answer 1

Here's the PHP to return a filename in JSON. This assumes that you store the filename in MySQL in a field called profileimage and the name of your php is getprofileimage.php.

$result = $conn->query("select profileimage from profiles where userid = '" . $userid . "'");

$outp = "[";
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
    if ($outp != "[") {$outp .= ",";}
    $outp .= '{"profileimage":"' . $rs["profileimage"] . '"}';
}
$outp .="]";

When run, this returns a JSON string like this

[{
    "profileimage": "abcd.jpg"
}]

In JavaScript, do this:

function getProfile(){
    var url = "http://yourserverlocation.com" + "/getprofileimage.php";

    $.ajax({
        url: url,
        type: 'GET',
        data: JSONObject,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (arr) {
            _getProfileResult(arr);
        },
        error: function () {
            validationMsg();
        }
    });
}

function _getProfileResult(arr){
    profileimage = arr[0].profileimage;
    //assuming that you have a <img id="imgProfilePicture> tag
    $("#imgProfilePicture").attr("src","http://yourserverlocation.com/" + "/images/" + profileimage +"_s");     
}