Jquery 如何通过ajax重新加载数据

Jquery 如何通过ajax重新加载数据,jquery,ajax,database,servlets,Jquery,Ajax,Database,Servlets,可能重复: 我有以下代码: public class IndexServlet extends HttpServlet { MoodService moodService; public IndexServlet() { moodService = new MoodService(); } /** * Accepts the request and sends it to the dispatcher which takes th

可能重复:

我有以下代码:

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

    }

}
公共类IndexServlet扩展了HttpServlet{
情绪服务情绪服务;
公共IndexServlet(){
moodService=新的moodService();
}
/**
*接受请求并将其发送给dispatcher,dispatcher接收数据库数据并将其显示为HTML
*/
@凌驾
受保护的void doGet(HttpServletRequest-req,HttpServletResponse-resp)抛出ServletException,IOException{
List moodList=moodService.findLastMoods(25);//我从数据库获取数据的方法
请求setAttribute(“moodList”,moodList);
RequestDispatcher RequestDispatcher=req.getRequestDispatcher(“index.jsp”);
转发(req,resp);
}
}
以及index.jsp文件:

<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>

前25项:
#容器{宽度:1200px;左边距:自动;右边距:自动;}
#表格标题{宽度:900px;文本对齐:居中;}
.field{文本对齐:中心;宽度:300px;}
前25项:
我的问题是:

我如何在其中实现AJAX,以便每30秒用新数据刷新一次表,显示数据库中的最后25个条目?我更喜欢使用jquery,看看我用它做的每件事都比不使用jquery简单得多

我对AJAX一无所知,这是我第一次使用它(我刚刚开始学习),因此如果有人能给我一个关于如何使用AJAX的分步教程,我将不胜感激。(或者至少向我展示我想要的代码,我可以对其进行反向工程,可能:))

MoodService是我自己处理数据库的类(它的工作方式与这种情况无关,唯一重要的是我需要在加载站点后将数据重新加载到表中)


谢谢你的帮助!:)

我建议您看看这本非常简单实用的教程:


您需要三件事:

  • 进行AJAX调用以获取数据
  • dispatcher将使用JSON对象进行响应,您可以解析并绘制页面
  • 30秒后再次进行AJAX调用,清空JSP中已有的表,并用新的响应再次绘制它

  • 第1点指南:
  • $.ajax({ 类型:“POST”, url:“some.php”, 数据:{姓名:“约翰”,地点:“波士顿”} }).done(函数(msg){ 警报(“保存的数据:“+msg”); });

  • 您可以使用将Java对象转换为JSON对象
  • 指南如下:

    要绘制页面,需要在Javascript中创建元素。可以通过使用jQuery中的.append()等来实现这一点

  • 使用setTimeout(functiontomakajaxcall,30000)//30秒
  • 我很难格式化它,有人能帮忙吗