1

我正在尝试发送要在 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);

            }
        });
    });
});

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

这是我的小服务程序

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();
4

2 回答 2

0

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

$(document).ready(function () {
    $("#submit").click(function () {
       $("#content").html('<img src="qrservlet?qrtext=www.mypage.com" />');
    });
});
于 2013-09-15T18:55:43.610 回答
0

从 AJAX 请求返回图像 url。

比使用下面的代码

$(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
            }
        });
    });
});
于 2013-09-15T02:01:42.097 回答