Question

我需要创建一个按钮，它能够使用Ajax将不同类型的内容（文本，图像，视频等）加载到模态弹出窗口中。（我不允许使用任何框架等，只是Ajax / HTML / CSS / JS）。到目前为止，它在文本上运行良好，但我似乎无法使用图像。我使用了很多我在网上找到的代码，但它们都有同样的问题。我使用的是Chrome，但也在Edge和Firefox上进行了测试。

问题：弹出模态窗口，但为空。

这是html代码：

<div id="lightbox-div" class="modal">
<!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <img id="demo"></img>
  </div>
</div>
<button id="modal_button">Click me</button>

这是JS代码：

var btn = document.getElementById("modal_button");
var modal = document.getElementById("lightbox-div");

btn.onclick = function() {
    modal.style.display = "block";
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState==4 && xhr.status==200) {
         document.getElementById("img").src = 
         "data:"+xhr.getResponseHeader("Content-Type")+";base64," + 
         btoa(String.fromCharCode.apply(null, new Uint8Array(
         xhr.response)));
      }
    }
  xhr.responseType = "arraybuffer";
  xhr.open("GET","fail.jpg",true);
  xhr.send();
}

还有可能只用一个div元素来获得不同类型的内容吗？

提前多多感谢： - ）

Answer 1

正如评论中所提到的，请求文件的基本行为，base64编码数据之前应用标题并将其设置为图像的src工作正常。通常情况下，错误检查最小化到不存在，并作为练习留给读者。

你会注意到我现在使用了一个单独的函数来执行ajax请求，该请求将调用两个用户指定的回调之一。

您无需在任何地方重复xmlHttpRequest内容我现在想要另一个资源。
onBtnClicked函数显示了一种简洁的方法当你做（或不要！）时，数据和定义你将用它做什么它。
您可能已将ajaxGetArrayBuffer确定为适合的人选修改。如果我想要XML回来怎么办？纯文本怎么样？我必须为我想要的每种数据类型编写一个函数？没有。如果声明了函数的第4个输入，那么该怎么办？是可选的，但可以用来做好事。

也许：

ajaxGetArrayBuffer(url, onLoad, onError, resultType)

如果用户提供了第4个输入，您可以设置它。否则，请留空。

resultType !== undefined（是的，那是2 =符号）应该可以帮到你。

<!DOCTYPE HTML>
<html>
<head>
<script>
window.addEventListener('load', onDocLoaded, false);

function byId(id){return document.getElementById(id)}

function onDocLoaded(evt)
{
    byId('modal_button').addEventListener('click', onBtnClicked, false);
}

function ajaxGetArrayBuffer(url, onLoad, onError)
{
    var ajax = new XMLHttpRequest();
    ajax.onload = function(){onLoad(this);}
    ajax.onerror = function(){onError(this);}
    ajax.open("GET",url,true);
    ajax.responseType = "arraybuffer";
    ajax.send();
}

function onBtnClicked(evt)
{
    byId('lightbox-div').style.display = 'block';
//  ajaxGetArrayBuffer('gfx07.jpg', onAjaxLoaded, onAjaxFailed);    /// ** WORKS FINE - 18kb jpg **
    ajaxGetArrayBuffer('s13.bmp', onAjaxLoaded, onAjaxFailed);      /// *** FAILS - 334kb bmp **
    function onAjaxLoaded(ajax)
    {
        byId('demo').src =  "data:"+ajax.getResponseHeader("Content-Type")+";base64," + btoa(String.fromCharCode.apply(null, new Uint8Array(ajax.response)));
    }
    function onAjaxFailed(ajax)
    {
    }
}
</script>
<style>
</style>
</head>
<body>
<body>
<div id="lightbox-div" class="modal">
<!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <img id="demo"></img>
  </div>
</div>
<button id="modal_button">Click me</button>
</body>
</body>
</html>

使用Ajax XMLHttpRequest的模态窗口中的图像

1 个答案: