如何从 div 内的 servlet 获取响应数据？

Question

我有这段简单的 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 post 方法

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 中还有其他替代方法吗？

Answer 1

只需使用简单的java脚本即可

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

：document.getElementById("response").innerHTML=res;

Answer 2

如果您在项目中使用 jQuery：

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

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

Answer 3

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

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

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