how to reload data via ajax

Question

Possible Duplicate:
How to use Servlets and Ajax?

I have the following code:

public class IndexServlet extends HttpServlet {

    MoodService moodService;

    public IndexServlet() {
        moodService = new MoodService();
    }

    /**
     * Accepts the request and sends it to the dispatcher which takes the database data and presents it as HTML
     */
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<Mood> moodList = moodService.findLastMoods(25); //my way of getting data from database

        req.setAttribute("moodList", moodList);

        RequestDispatcher requestDispatcher =req.getRequestDispatcher("index.jsp");
        requestDispatcher.forward(req, resp);

    }

}

and the index.jsp file:

<html>

<head>
    <title>Previous 25 entries:</title>
    <style type="text/css">
        #container {width:1200px; margin-left:auto; margin-right: auto;}
        #tableheader {width:900px; text-align: center;}
     .field {text-align:center; width:300px;}
    </style>




</head>


<body style="background-color: black;">
<div id="container">

    <table border="1" bordercolor="#FFCC00"  width="900" height="80" cellpadding="3" cellspacing="3" style="border-top-left-radius: 15px; border-top-right-radius: 15px; text-align: center; margin-left:auto; margin-right: auto; background-color:#FFFFCC; font-size: 33px; font-family: Monotype Corsiva ">

        <tr>
            <td style="border-top-left-radius: 10px; border-top-right-radius: 10px;">PREVIOUS 25 ENTRIES:</td>
        </tr>

    </table>

    <%
        List<Mood> moodList = (List<Mood>) request.getAttribute("moodList");
        for (Mood mood : moodList) {

            Integer a = mood.getMoodId();
            String moodId = new String();

            switch (a) {

                case 1:
                    moodId = "Happy";
                    break;

                case 2:
                    moodId = "Sad";
                    break;

                case 3:
                    moodId = "Lonely";
                    break;

                case 4:
                    moodId = "Angry";
                    break;

                case 5:
                    moodId = "In Love";
                    break;

                case 6:
                    moodId = "Content";
                    break;
            } %>

    <table id="table" border="1" bordercolor="#FFCC00"  width="900" cellpadding="3" cellspacing="3" style="text-align: center; margin-left:auto; margin-right: auto; background-color:#FFFFCC;">

        <tr>
            <td class="field"> <%=mood.getUserId()%></td>
            <td  class="field"> <%=moodId%></td>
            <%Date date = new Date(mood.getTime());
                SimpleDateFormat sdf = new SimpleDateFormat("dd:MM:yyyy hh:mm:ss");
                String sDate = sdf.format(date);
            %>
            <td  class="field"> <%=sDate%></td>

        </tr>

    </table>
    <%
        }
    %>



</div>
</body>

</html>

My problem is:

How do I implement AJAX into this so that every 30 seconds, the table is refreshed with the new data, showing the last 25 entries into the database? I would prefer to use jquery, seeing how everything I did with it so far was far simpler than doing it without jquery...

I know nothing about AJAX, this is literally my first time working with it (I am just starting with my learning), so I would really appreciate it if someone would give me a step-by-step tutorial on how to do this. (or at least show me the code that would do what I want, I could reverse engineer it, probably :) )

MoodService is my own class that deals with the database (how it works is irrelevant to this situation, the only important thing is that I need to reload the data into the table after I load the site).

Thanks for the help! :)

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

I suggest you to take a look at this really simple and useful tutorial:

How to use Servlets and Ajax

edited May 23 '17 at 12:27

Community

1
1

answered Oct 18 '12 at 14:56

axcdnt

14,004
7
26
31

Pulkit Mittal · Answer 2 · 2012-10-18T15:19:00.730

There are 3 things you would need:

Make an AJAX call to fetch data.
The dispatcher will response back with a JSON object, which you can parse and paint your page.
Make an AJAX call again after 30 seconds, empty the table you already have in your JSP and paint it again with the new response.
1. Guide for 1st point : http://api.jquery.com/jQuery.ajax/
$.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); });
1. You can use Jackson API for converting the Java objects to JSON Objects.

Guide here: http://www.mkyong.com/java/jackson-streaming-api-to-read-and-write-json/

For painting your page, you need to create elements in Javascript. You can do that by using .append(), etc from jQuery.

use setTimeout(functionToMakeAJAXCall, 30000); //30 sec

I'm having a hard time formatting it, can anybody help please?

how to reload data via ajax

2 Answers2