How to get response data from servlet inside a div?

Question

I have this simple html piece of code, whenever I click on any of the buttons the server will send back some string, I want it to be displayed in #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>

In JS i am using XMLHttpRequest or ActiveXObject based on browser to send request to servlet, and i can get the response in client.responseText() so how can i direct this output to my #response div?

Here is my 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 method

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");
}

But using js script not jquery, i am not able to get the output from servlet

Thanks all for a jQuery code, any alternative in Javascript?

Related: http://stackoverflow.com/questions/4112686/update-current-page-with-a-servlet — BalusC, May 20 '11 at 12:41

xkeshav · Accepted Answer · 2011-05-20T09:49:22.730

2

simply do

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

in simple java script: document.getElementById("response").innerHTML=res;

edited May 20 '11 at 09:49

answered May 20 '11 at 09:43

xkeshav

53,360
44
177
245

@diEcho: Thanks, i'll try and get back, also what is the alternative in JS, just for curiosity – AabinGunz May 20 '11 at 09:45
update my answer , reference : http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first – xkeshav May 20 '11 at 09:49
@diEcho: Thanks a lot, i got othere answers too, but you were the first, so i'll give it to you :) – AabinGunz May 20 '11 at 09:51
1

@diEcho: Don't worry, I tried accepting, and it says I cannot accept any answer till 5 mins, so just wait for 5 mins :) thanks – AabinGunz May 20 '11 at 09:55
@diEcho: One more small request, can you look into my edited code, its passing the data to servlet but I am not getting the data displayed in the div, can you point out where is the mistake here? Sorry for the trouble – AabinGunz May 20 '11 at 10:33

score 2 · Answer 2 · answered May 20 '11 at 09:45

2

If you're using jQuery in your project:

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

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

answered May 20 '11 at 09:45

Vadim

5,154
2
20
18

using jquery it works, but by using JS i tried and it is not giving any output, I have edited the question to show my js, can you help finding what is wrong with the code? – AabinGunz May 20 '11 at 12:19

score 1 · Answer 3 · answered May 20 '11 at 09:44

Since you are using jQuery (assumtion based on the question tags), you can use the .load()-method:

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

This has the benefit of jQuery doing all of the ajax work for you (creating and handling XMLHttpRequest and ActiveX stuff).

How to get response data from servlet inside a div?

3 Answers3