Question

有人可以帮忙解决这个问题吗？当图像直接添加到代码中时，它可以工作。但是当尝试使用ajax从MySql检索图像路径时，它不起作用。

我想要的就是让这条线工作：'back'：{'url'：imageX，'img'：null}，

此代码有效：

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

但是，虽然ajax成功从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 }
    };

Answer 1

您是否检查了底部函数内的imageX值？

如果您打算在底部函数上使用imageX变量，则它必须具有不同的范围。你在ajax成功中声明它。

Answer 2

您要做的事情并不是很清楚，但是，在您的第二个代码段中，imageX将不会被定义。即在

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

imageX

将是未定义的，因为您正在尝试实际引用window.imageX。成功回调中的imageX被声明为局部变量。因此，'hack'将使imageX成为一个全局变量。但是，可能有更好的方法来实现您想要做的事情，但我需要更多信息。

修改

好的，所以有一些问题。首先，在setupCanvases中，您引用image，这是未定义的。所以部分修复就是将代码更改为

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

但是，这不会产生所需的结果，因为您只能看到最后加载的图像。我认为这不是你想要的。要真正解决这个问题，我认为您需要更改setupCanvases。此外，您发布的js Fiddle中似乎存在一些语法错误。例如，有一个*/没有前面的/*。

最后，您似乎永远不会调用loadImages，这是最终调用setupCanvases来绘制图像的函数。

Answer 3

你需要把它放在回调函数

中

(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);

    }
});

Answer 4

通过添加“async：false”来禁用ajax中的异步.Declare imageX为全局

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 }
};

使用ajax显示图像

4 个答案: