Javascript 使用ajaxo显示图像

有人能帮我修一下吗？当图像直接添加到代码中时，它就工作了。但是当尝试使用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 }
    };

---

是否检查了底部函数中的imageX值

---

如果要在底部函数中使用imageX变量，则它必须具有不同的作用域。您正在ajax成功中声明它。

不太清楚您想做什么，但是在第二个代码片段中，

imageX

将没有定义。即在

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

imageX 

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

编辑

好的，所以有一些问题。首先，在

设置画布

中，您引用了未定义的

图像

。因此，部分修复方法是将代码更改为

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

但是，这不会产生所需的结果，因为您只能看到加载的最后一个图像。我想这不是你想要的。要真正修复它，我认为您需要更改

设置画布

。此外，您发布的js FIDLE中似乎存在一些语法错误。例如，有一个

*/

没有前面的

/*

---

最后，您似乎从不调用

loadImages

，这是最终调用

setupcanvas

来绘制图像的函数。

您需要将其放入回调函数中

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

    }
});

（函数（）{
$.ajax({
类型：'GET'，
url:'php/myphp.php'，
数据类型：'json'，
成功：功能（响应）{
var imageX='img/'+响应[0]。img+'.jpg'，
groupX=响应[0]。团队；
var s=document.getElementById（“CurrentVal”）；
s、 value=imageX；***///显示img/logo.jpg**
var image={
'back'：{'url'：imageX，'img'：null}，
'front'：{'url'：'img/other.jpg'，'img'：null}
};
//添加图像
$（'通过添加“async:false”禁用ajax中的异步。将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 }
};

你能从你的html中发布全部javascript代码吗？谢谢Kiran。我正在通过php将一个图像的名称检索到ajax（logo.jpg）。这个logo.jpg驻留在img文件夹中。我希望能够使用该变量名+路径在'back'加载图像：{'url'：imageX，'img'：null}，是的，我得到了那个位：）我的意思更多的是你声明和定义var image=…的匿名函数的意义。正如其他人所建议的，你可以从ajax回调创建你的对象，然后调用使用这个对象的函数，或者将使用“image”对象的代码放入ajax成功回调中函数（正如tomas.polach.ch所建议的）。但是图像不会显示…当然不会。正如我所评论的，他所做的只是创建了一个本地对象。您现在需要使用该对象；），否则当成功回调返回时，它只会超出范围一次（在代码片段中，这将发生在var image声明之后…。请粘贴完整代码（在js FIDLE上或此处）。将您的示例更改为至少应加载一组图像的内容。但是，正如我所指出的，代码需要更多的更改才能使其适用于多组图像。您好，Andre…谢谢。您是对的…它不会显示出ajax的成功。我如何解决此问题？您必须在所有函数之前声明变量。因此成为一个全局变量。在使用ajax函数之前编写
var imageX
。在de success函数中，只能这样调用它：
imagX=…
这不是一个解决方案，因为现在“image”是一个局部变量，一旦定义了它，就不会发生任何事情。原始问题缺少的是以后如何使用“image”对象打开。如果没有这些信息，我认为不可能提出解决方案。谢谢…我这样做了，CurrentVal显示了结果。但是图像没有加载？知道为什么吗？是的，您需要向我们展示您打算如何使用图像对象：）一旦显示，我们可以告诉您如何修复；）您可以使用：$（''）添加图像，{src:image.back.url}）.appendTo（'body'）或设置现有dom对象的源：$（'#image'）.attr（'src'，image.back.url]）只需将此添加到回调函数的末尾，请查看我更新的答案。它确实加载了图像。