help with jquery ajax with jsp/servlets

[Marko Debac]

Hi,

I'd like to make ajax request with jquery using hiden form. The form must be post request to servlet. In servlet we get data with

int id = request.getParameter("hiden_data");
Article article = getArticle(id);
request.setAttribute("article", article);

RequestDispatcher rd = getServletContext().getRequestDispatcher("/index.jsp");
rd.forward(request, response);

so that I can get values of all properties what comes with loaded object "article" in jsp/jstl tags, not in javascript variables, and of course without refreshing the page index.jsp from where post request come from in the first place.

I am new with jquery ajax, and if it is there some tutorial or code snipet for my task I would aprishiate very much.
Thanks,
Marko

[Bear Bibeault]

I'm not sure exactly what you're asking for. jQuery makes it super easy to call Ajax requests. You'll need to let us know more precisely what part you are having problems with.

To start, what kind of data is to be returned as the response? HTML fragments? XML? JSON? other?

What is the JSP that the servlet is forwarding to generate? Is that what you want returned as the response? WHat will you do with it on the page once you get it?

The online docs are pretty good, and there's always my book on jQuery in which chapter 8 is completely devoted to Ajax.

[Marko Debac]

Ok, exactly what I have is this, and I am trying to achive the same thing without reload index.jsp (with jQuery):

servlet:

     String id = null;
     id = request.getParameter("id"); 
     
     Database database = new Database();
     Article[] articles = database.getArticles(id);
     
     request.setAttribute("articles", articles);

    RequestDispatcher rd = getServletContext().getRequestDispatcher("/index.jsp");
    rd.forward(request, response);

index.jsp:

<c:if test="${not empty artices}">
                                                                 
    <ul class="thumb">
            <c:forEach var="article" items="${articles}" >
                    <li><a href="<c:out value="${article.codeId}"/>" title="">
                          <img src="<c:out value="${article.urlImage}"/>" alt="" />
                              <p><c:out value="${article.name}"/></p>
                    </a></li>
             </c:forEach> 
    </ul>
                                
</c:if>

nad POJO class Article with properties codeId, name and urlImage (and getters and setters)


Everythig work great but with reloading the page, what is the raeson I can not do jquery efects, and I want to make the same post request with ajax jquery; to get the list of articles from database.

So how my servlet and jquery/ajax post now must look like?

I have done ajax request with posting id, and servlet can get it, but I dont know how to handle reponse (for jstl tags)

index.jsp

$(function(){
        $('#testButton').click(function(){
          $.post(
            'MyServlet',
            {id:'id'},
            function(data) {
               //alert(data);
              }
          );
        });
      });

servlet

 id = request.getParameter("id"); 

Thanks,
Marko

[Bear Bibeault]

I have done ajax request with posting id, and servlet can get it, but I dont know how to handle reponse (for jstl tags)

The JSTL will be evaluated on the server before the response gets sent back to the browser, so you can use it in Ajax requests just the same way that you use it in "normal" request.

If you are using JSP on the server to format HTML fragments to inject into the page, just use the jQuery .load() method (as opposed to $.post()):

$('#injectHere').load('/url/to/servlet',{id:whatever});    

Your back-end stuff can operate just the same way as always -- the only difference is that you'll be creating HTML fragments rather than full HTML pages.

[Marko Debac]

But I have a list of html fragments to be generated. Please, can you give me example for my code snipet

<c:if test="${not empty artices}">   
                                                                    
    <ul class="thumb">   
            <c:forEach var="article" items="${articles}" >   
                    <li>
                       <a href="<c:out value="${article.codeId}"/>" title=""></a>
                    </li>           
            </c:forEach>    
    </ul>   
                                   
</c:if>  

Thanks.


And Yes, I hardly wait "Jquery in action 2nd" to be finshed, to buy it.
(I have downloaded source, but it has only code to the fifth chapter )

[Bear Bibeault]

Marko Debac wrote:But I have a list of html fragments to be generated.
The code you posted will create the whole list. Remember, your JSP will run on the server and whatever it generates will be returned as the response. The fact that you are using JSTL in your JSP, or even the fact that you are using JSP at all, is completely irrelevant to the Ajax request.

Your JSP will create the <ul> element and all its <li> children. That entire generated HTML fragment will then be returned to the browser as the response.

And Yes, I hardly wait "Jquery in action 2nd" to be finshed, to buy it.
(I have downloaded source, but it has only code to the fifth chapter )
Only up to chapter 5

Hmm, that's not right. It should have up to chapter 8. I'll see to it that the download is updated.

Meantime, you can download the source for chapters 1 through 8 here.

[Marko Debac]

mesage canot be deleted

[Marko Debac]

You ment something like this

$('#injectHere').html('<c:out value="${articles}"/>');
$('#injectHere').load('/url/to/servlet',{id:whatever});

1. I see parameter on servlet, thats ok
2. It loads me the hoal jsp page into div with id injectHere, because in servlet I have

// RequestDispatcher rd = getServletContext().getRequestDispatcher("/index.jsp");
// rd.forward(request, response);

3. and after I comented, I get nothing injected into div at all

[Bear Bibeault]

Marko Debac wrote:

$('#injectHere').html('<c:out value="${articles}"/>');
$('#injectHere').load('/url/to/servlet',{id:whatever});

What's the purpose of the .html() call? If you're about to load the content via Ajax, why set it to anything just before you do that?

2. It loads me the hoal jsp page into div with id injectHere, because in servlet I have

// RequestDispatcher rd = getServletContext().getRequestDispatcher("/index.jsp");
// rd.forward(request, response);

Well, yeah -- if that's what you return as the response. Whatever is returned as the response is what will be injected. You want it to be just the HTML fragment to be loaded -- not a whole page!

(Are you thinking that a JSP must be a full HTML page? It can be any text. JSP could care less about HTML.)

3. and after I comented, I get nothing injected into div at all

No response == no injection.

Again, whatever you generate on the server and return as the response will be injected into the DOM element. Only generate what you want injected.

[Marko Debac]

Is it so hard to show me with a little example, so I could understud where setAttribute fits in?
Because on behalf of this list in set atribute I create looping wich I generate html snipets with jstl.
Please, what text on servlet I need to generate? It is so much litle or no examples on the internet..

Thanks.

[Bear Bibeault]

Your servlet shouldn't generate any text -- that's the job of the JSP.

I'm sorry that you are not finding this helpful, but I'm not really sure where you are having a problem. An Ajax request is just like any other from the point of the view of the server code.

The sequence is the same:

The request activates the servlet.

The servlet gathers the request params and grabs any data needed to create the response.

The data is placed as scoped variables in request scope (this is where setAttribute() comes in).

The servlet forwards to the JSP.

The JSP uses JSTL and EL to create the response. This does not have to be a full HTML page. It can be any text, including an HTML fragment.

The response is returned to the browser.

This sequence is exactly the same regardless of whether it's an Ajax request or not.

When using jQuery's .load() method, whatever's returned as the response is what gets injected into the DOM.

(If you've downloaded the jQuery in Action code, look at the examples for Chapter 8. Although it doesn't involve servlets -- to keep things simple -- it does show how you can use JSP to return just HTML fragments.)

[Marko Debac]

Thanks Bear, it was helpful