Question

我有一个带有一个按钮的基本HTML页面。单击该按钮，它应该在GET请求上调用HTTP URL（带有Accept标头）。

HTTP URL的输出是图像或音频或视频（根据请求标头）。我该如何编写Javascript或Ajax调用

<html>

<form>

<input type="submit" id='img_display' onClick=imgDisp()>
<div id='display'></div>

</form>

</html>

Ajax代码 -

$("#img_display").on( "click", function imgDisp() {
 $.ajax(            
    {
        type: 'GET',                
        url: 'http_url',
        dataType: 'json',
        beforeSend : function(xhr)
         {  
             xhr.setRequestHeader('Accept', 'image/png');
        },              
        success: function(data){
                alert("successfully")                                            
        },
        error: function(e){     
              alert("error post" + e);
        }               
    }
    );

}）;

Answer 1

要发出返回图像，音频或视频内容的Ajax请求，并强制接收Javascript猜测潜在的大量数据的内容类型，设计很糟糕。

根据音频和视频内容的类型，可能根本无法做到这一点。

更好地制作一个Ajax请求，例如，返回一个包含内容类型和URL的JSON对象：

{ "type": "image",
  "url": "http://example.com/images/5/example.jpg" }

或者，对于视频：

{ "type": "video",
  "url": "http://example.com/videos/5/example.mp4" }

你得到漂移。

然后，您可以适当地处理内容，例如创建img元素并将src属性设置为URL，或使用视频URL调用视频或音频播放器。

这样，您还可以发送与渲染最终结果相关的其他元数据 - 例如图像尺寸和替代文字。

Answer 2

希望这会对你有帮助!!

$(document).ready(function(){
    $("#Submit").click(function(){
        var image_url = $(".imageurl").val();
        $(".ImageContainer").html("<img src='"+image_url+"' width='200'>");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="imageurl">
<button id="Submit">Submit</button>
<div class="ImageContainer">
    <!--Image Display -->    
</div>

如何在HTML页面中显示带有HTTP标头的图像？

2 个答案: