使用ajax显示图像

Can someone help to fix this? When the images is directly added into the code it works. But when tried to retrieve the image path from the MySql using ajax, it doesn't work.

All I want is to make this line work: 'back': { 'url':imageX, 'img':null },

This code works:

(function() {
    var image = { 
        'back': { 'url':'img/logo.jpg', 'img':null },
        'front': { 'url':'img/another.jpg', 'img':null }
    };

But this doesn't work though ajax sucessfully fetch the data from the mysql?

$.ajax({
    type:'GET',
    url:'php/myphp.php',
    dataType:'json',
    success: function(response){
        var imageX   =   'img/'+response[0].img+'.jpg',
            groupX   =   response[0].team;
            var s = document.getElementById("CurrentVal"); 
            s.value = imageX; **///shows img/logo.jpg**     


}
});
(function() {
    var image = { 
        'back': { 'url':imageX, 'img':null },
        'front': { 'url':'img/another.jpg', 'img':null }
    };

Did you check the imageX value inside of your bottom function?

If you intend to use imageX variable on your bottom function, it must have a different scope. You are declaring it inside ajax success.

It's not really clear what you are trying to do, but, in your second code snippet, imageX will not have been defined. I.e. in

(function() {
var image = { 
    'back': { 'url':imageX, 'img':null },
    'front': { 'url':'img/another.jpg', 'img':null }
};

imageX 

will be undefined, because you are trying to actually reference window.imageX. The imageX in the success callback is declared as a local variable. So a 'hack' would be to make imageX a global variable. However, there is probably a better way to achieve what you are trying to do, but I would need more info.

EDIT

Ok, so there are a few problems. First, in setupCanvases, you reference image, which is undefined. So a partial fix would be to change your code to

var image = null;
var imageX;
var groupX;
$.ajax({
type:'GET',
url:'php/nmyphp.php',
dataType:'json',
success: function(response){
    imageX   =   'img/'+response[0].tickNum+'.jpg',
    groupX   =   response[0].tickCdt;

image = { 
    'back': { 'url':imageX, 'img':null },
    'front': { 'url':'img/secondImage.jpg', 'img':null }
};
    ...

However, this will not produce the desired result, as you will only be able to see the last image that was loaded. I assume this is not what you want. To really fix it, I think you need to change the setupCanvases. Also, there seem to be some syntax errors in the js Fiddle you posted. For example, there's a */ without a preceeding /*.

Finally, you never seem to call loadImages, which is the function that eventually calls setupCanvases to draw the image.

you need to put it inside the callback function

(function() {

  $.ajax({
    type:'GET',
    url:'php/myphp.php',
    dataType:'json',
    success: function(response){

        var imageX   =   'img/'+response[0].img+'.jpg',
            groupX   =   response[0].team;
            var s = document.getElementById("CurrentVal"); 
            s.value = imageX; **///shows img/logo.jpg**  

        var image = { 
            'back': { 'url':imageX, 'img':null },
            'front': { 'url':'img/another.jpg', 'img':null }
        };

        // add an image
        $('<img>',{
            src: image.back.url
        }).appendTo('body')

        // or load it into an existing dom object
        $('#image').attr("src",image.back.url);

    }
});

disable asynchronous in your ajax by adding "async: false".Declare imageX as global

var imageX; // declare global

$.ajax({
type:'GET',
url:'php/myphp.php',
dataType:'json',
async: false, // disable async
success: function(response){
        imageX   =   'img/'+response[0].img+'.jpg';
        var  groupX   =   response[0].team;
        var s = document.getElementById("CurrentVal"); 
        s.value = imageX; **///shows img/logo.jpg**     


}
});

(function() {
var image = { 
    'back': { 'url':imageX, 'img':null },
    'front': { 'url':'img/another.jpg', 'img':null }
};