如何从 div 中的 servlet 获取响应数据？答案

【问题标题】：How to get response data from servlet inside a div?如何从 div 中的 servlet 获取响应数据？
【发布时间】：2011-08-29 12:44:12
【问题描述】：

我有这段简单的 html 代码，每当我点击任何按钮时，服务器都会发回一些字符串，我希望它显示在 #response div 中。

<form target="_self" method="post">
    <table>
        <tr>
            <td width="35"><input type="button" id="btncreate" value="create" onclick="getData();"></td>
            <td width="35"><input type="button" id="btnupdate" value="update"></td>
            <td width="30"><input type="button" id="btndelete" value="delete"></td>
        </tr>
        <tr>
            <td>Name : </td>                    
            <td><input type="text" id="name" value=""></td>
        </tr>
        <tr>
            <td>File : </td>
            <td><input type="file" id="filname" value=""></td>
        </tr>
    </table>
</form>
<div id="response"></div>

在 JS 中，我使用基于浏览器的 XMLHttpRequest 或 ActiveXObject 向 servlet 发送请求，并且我可以在 client.responseText() 中获得响应，那么如何将此输出定向到我的 #response div？

这是我的 JS

function getData()
{
var client;
var data;
var url_action="/temp/getData";
if(window.XMLHttpRequest)
{
    client=new XMLHttpRequest();
}
else
{
    client=new ActiveXObject("Microsoft.XMLHTTP");
}
client.onreadystatechange=function()
{
    if (client.readyState==4 && client.status==200)
    {
         document.getElementById("response").innerHTML=client.responseText; 
    }
};
data="name="+document.getElementById("name").value+"&file="+document.getElementById("filname").value;
client.open("POST",url_action,true);
client.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
client.send(data);
}

Servlet 发布方法

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    PrintWriter out=response.getWriter();
    log.info("Good");
    out.println("Good to go");
}

但是使用 js 脚本而不是 jquery，我无法从 servlet 获取输出

感谢大家提供 jQuery 代码，还有 Javascript 中的替代方案吗？

【问题讨论】：

相关：stackoverflow.com/questions/4112686/…

标签： javascript html servlets

【解决方案1】：

简单地做

success: function(data) { 
var res = client.responseText();
$('#response').html(res);
// or $('#response').append(res); 
});

在简单的java脚本中：document.getElementById("response").innerHTML=res;

【讨论】：

@diEcho：谢谢，我会尝试回来，还有什么是JS中的替代品，只是为了好奇
更新我的答案，参考：w3schools.com/ajax/tryit.asp?filename=tryajax_first
@diEcho：非常感谢，我也得到了其他答案，但你是第一个，所以我会给你:)
@diEcho：别担心，我试过接受，它说我不能在 5 分钟内接受任何答案，所以请等待 5 分钟 :) 谢谢
@diEcho：还有一个小请求，你能看看我编辑的代码，它把数据传递给servlet，但我没有得到div中显示的数据，你能指出错误在哪里这里？抱歉给您添麻烦

【解决方案2】：

如果您在项目中使用 jQuery：

$('#response').load("http://url...")

http://api.jquery.com/load/

【讨论】：

使用 jquery 可以工作，但是通过使用 JS 我尝试过并且没有给出任何输出，我已经编辑了问题以显示我的 js，你能帮忙找出代码有什么问题吗？跨度>

【解决方案3】：

由于您使用的是jQuery（基于问题标签的假设），您可以使用.load()-method：

$('#some-button').click(function (e) {
    e.preventDefault();
    $('#response').load('url/to/entry/point');
});

这有 jQuery 为您完成所有 ajax 工作（创建和处理 XMLHttpRequest 和 ActiveX 内容）的好处。

【讨论】：