Question

Reader的摘要版本：从服务器请求图像并使用AJAX（或AJAI，或许？：）将其放入DOM的最有效方法是什么？这是长版：

您好，我正在设置一个包含项目列表的简单页面，当您点击一个项目时，它会执行以下操作：

清除之前图像（如果有）的页面（隐藏）上的模态对话框
请求/url/ajax/some-image/
使用显示
对服务器的请求完成后：将该页面的HTML注入模式对话框

上面请求的页面搜索数据库以查找与给定URL匹配的条目，并返回一个显示<img src="path/to/image.jpg" alt="Whatever this would be." />的HTML页面。我不确定jQuery是否能为我带来一些魔力来提高效率，但在我看来，请求一个请求另一个图像的页面正在做更多的工作而不是需要做的工作。我正在寻找的将是更像这样的东西：

清除之前图像的模态对话框
请求/url/ajax/some-image/上的图片（我可以将其设置为返回图片本身，而不是图片的<img/>标记）
使用显示
对服务器的请求完成后：将图像直接注入模式对话框

我遇到的问题是......怎么样？我在看$.get，这似乎对我来说最有意义，而且我只是有点太过分了 - 我是JavaScript / jQuery的新手。

我已将网址的some-image部分的值设置为与其对应的rel的{{1}}值（以澄清：这是在服务器端完成的），所以我可以在<a>事件的函数中轻松地构建到图像的URL，当它被触发时，模态对话框只是click()。这可以通过更改div#dialog的{{1}}

Answer 1

Zack，我认为你缺少的是浏览器会为你做“GET”。

使用JavaScript将html注入页面时......如果该代码包含<img>标记，浏览器将调用该源URL并为您检索图像。您无需再通过JavaScript调用$.get来获取图片。

因此，您所要做的就是确保从$.get返回的html包含带有正确网址的图片代码，浏览器会完成剩下的工作。

我希望有所帮助。

Answer 2

如果您从页面返回整个代码：

$('a.modal').click(function(){
  // do your dialog clearing

  // build your url and assign your to var url

  $.get(url, function(data){ 
    $('div#dialog').html(data);
  };
});

使用jQuery AJAX获取图像的最有效方法

2 个答案: