javascript - javascript 中的 URL 编码

Question

我将一个 div 与从服务器端方法返回的图像列表绑定(bind)在一起。

如下所示:

  $("#GalleryPhotos").append("<div class='thumbnail'><a rel='group1' data-caption='caption'  class='fancybox'  href=" + data.d[i] + "><img  height='120' width='150' src=" + data.d[i] + "></img></a> </div> ");

我会得到完整的url

 < img src= "/UploadedFiles/Gallery/CricketAlbum/5335.jpg" />

如果文件名中没有空格，它会正确显示，但是如果文件名中有空格，它会呈现为:

 < img  src="/UploadedFiles/Gallery/Birdst" album="" sample_05.jpg="" />

我试过像这样 src="+ encodeURI(data.d[i])+" 内置函数编码的 javascript 但我的 img 仍然像第二种情况一样呈现..请有人帮助我

Answer 1

按照@DavidThomas 的建议，使用encodeURIComponent():

 ..  width='150' src='" + encodeURIComponent( data.d[i] ) + "'></a> ..

特别说明

这不起作用的主要原因是因为您没有将 src 的值放在引号中。实际上你在写:

<img  src=/UploadedFiles/Gallery/Birdst album sample_05.jpg />

这会处理成您所看到的奇怪属性。但是，如果您引用了该值，则该 URL 也可能有效:

< img  src='/UploadedFiles/Gallery/Birdst album sample_05.jpg' />

代码应该是:

.... src='" + data.d[i] + "'>....

或者:

.... src=\"" + data.d[i] + "\">....

现在您已经了解了这么多，然而，转义 URL 总是更安全，因为未转义的字符可能会在某些系统中产生意外结果:

.... src=\"" + encodeURIComponent( data.d[i] ) + "\" ....