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

问题描述

读者文摘版本：什么是从服务器请求的图像并将其放入到DOM使用AJAX的最有效的方式（或AJAI，也许是：？））？这里的长版：

Reader's digest version: What is the most efficient way of requesting an image from a server and placing it into the DOM using AJAX (or AJAI, perhaps? : ) )? Here's the long version:

您好SO，我设立有项目列表一个简单的页面，当你点击一个，它执行以下操作：

Hello SO, I'm setting up a simple page that has a list of items, and when you click on one, it does the following:

1. 清除页面上的模态对话框（这是隐藏的）图像$ P $的pviously它（如果有的话）
2. 请求的页面 / URL / AJAX /一些图像/
3. 打开一个微调模态对话框，显示
4. 一旦请求到服务器完成：从页面的HTML注入模态对话框

1. Clear the modal dialog on the page (which is hidden) of the image previously in it (if any)
2. Request the page of /url/ajax/some-image/
3. Open the modal dialog with a spinner showing
4. Once the request to the server finishes: inject the HTML from that page into the modal dialog

就是要求上面搜索通过数据库，寻找符合给定的URL条目的页面，并返回一个HTML页面，上面写着＆LT; IMG SRC =路径/到/ image.jpg的ALT =不管这将是。 /＆GT; 。我不知道是否jQuery是节省了我一些魔法使这种更有效的，但在我看来，请求一个页面请求另一个图像做更多的工作要做的需求。我正在寻找的将是更多的东西是这样的：

The page that's requested above searches through a database to find the entry that matches the URL given, and returns an HTML page that says <img src="path/to/image.jpg" alt="Whatever this would be." />. I'm not sure if jQuery is saving me with some magic to make this more efficient, but it seems to me that requesting a page that requests another image is doing more work than needs to be done. What I'm looking for would be something more like this:

1. 清除图像$ P $在里面
模态对话框pviously
2. 请求形象 / URL / AJAX /一些图像/ （我可以设置为返回，而不是一个图像本身，和LT ; IMG /＆GT; 标记的图像）
3. 打开一个微调模态对话框，显示
4. 一旦请求到服务器完成：将图像直接进入模态对话框
注入

1. Clear the modal dialog of the image previously in it
2. Request the image at /url/ajax/some-image/ (I can set this to return the image itself, instead of an <img/> tag for the image)
3. Open the modal dialog with a spinner showing
4. Once the request to the server finishes: inject the image directly into the modal dialog

我遇到的问题是......怎么样？我一直在寻找 $获得，这似乎使最有意义的我，这和我只是有点过头了我的头 - I'm很新的JavaScript / jQuery的。

The problem I'm having is... how? I was looking at $.get, which seems to make the most sense to me for this and I'm just in a bit too far over my head--I'm quite new to JavaScript/jQuery.

我已经设置了网址的的相对值部分图像部分的价值＆LT; A＆GT; ，它对应于（澄清：这是做服务器端），这样我就可以在轻松地构建的URL图像pretty的的点击（）事件的功能时，它的发射，模态对话框就是 DIV＃对话框。难道这与一些简单的改变的的src 来完成的＆LT; IMG /＆GT;

I've set the value for the some-image part of the URL to the rel value of the <a> that it corresponds to (to clarify: this is done server-side), so I can build the URL to the image pretty easily within the click() event's function when it's fired, the modal dialog is just div#dialog. Could this be done with something as simple as changing the src of the <img/>?

推荐答案

扎克，我认为你缺少的是，浏览器会做的GET为您服务。

Zack, what I think you're missing is that the browser will do the "GET" for you.

当你注入HTML与JavaScript的网页...如果code包括＆LT; IMG＆GT; 标记的浏览器将调用源的URL和检索图像为您服务。你不必做从您的JavaScript另一个 $。获得调用来获取图像。

When you inject html into your page with JavaScript ... if that code includes an <img> tag the browser will call that source url and retrieve the image for you. You don't have to do another $.get call from your JavaScript to get the image.

所以，你所要做的就是确保从返回的HTML的 $。获得包括与正确的URL的图像标签，浏览器做的其余部分。

So, all you have to do is make sure that the html that is returned from your $.get includes an image tag with the correct url, the browser does the rest.

我希望帮助。

这篇关于最有效的方式使用jQuery AJAX来获取图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！