Question

我正在尝试发送一个要在qr图像中编码的字符串，并将图像返回到同一页面上。

<form action="qrservlet" method="get">
    <p>create QR Code</p>
        <input type="text" name="qrtext" />     
        <input type="submit" value="Generate QR Code" />        
    </form>

这样可以正常工作，但会返回一个新页面。我正在尝试在页面中加载图像。

$(document).ready(function(){
    $("#submit").click(function(){

        $.ajax({
            type: "GET",                        
            url: "qrservlet",
            data: { "qrtext" : "www.mypage.com" },
            success:function(result)
            {
                $("#content").html(result);

            }
        });
    });
});

当我尝试这个时，它返回一堆符号。

这是我的servlet

String qrtext = request.getParameter("qrtext");

        ByteArrayOutputStream out = QRCode.from(qrtext).to(
                ImageType.PNG).stream();

        response.setContentType("image/png");
        response.setContentLength(out.size());

        OutputStream outStream = response.getOutputStream();

        outStream.write(out.toByteArray());

        outStream.flush();
        outStream.close();

Answer 1

从AJAX请求中返回图片网址。

使用以下代码

$(document).ready(function () {
    $("#submit").click(function () {
        $.ajax({
            type: "GET",
            url: "qrservlet",
            data: {
                "qrtext": "www.mypage.com"
            },
            success: function (result) {
                $("#content").html('<img src="'+result+'" >'); //changed here
            }
        });
    });
});

Answer 2

要显示图像，您需要在html中使用img-tag。 img-tag在显示该图像时要做的是从服务器获取数据。这导致了这样一个事实，即不需要对服务器执行典型的ajax调用然后显示结果，但是只需将img-tag呈现到文档中：

$(document).ready(function () {
    $("#submit").click(function () {
       $("#content").html('<img src="qrservlet?qrtext=www.mypage.com" />');
    });
});

如何使用ajax从servlet发送图像？

2 个答案: