我无法让这个简单的ajax代码工作

时间:2012-05-10 15:53:28

标签: java jquery xml ajax servlets

我开始用jquery学习ajax,我尝试了很多谷歌搜索,我无法让这个测试代码工作,你能告诉我我做错了什么吗?会发生什么是ajax不会创建表。这是我的代码:

JSP:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery.js"></script>
    <title>My First Web App</title>
    <script type="text/javascript">
        $(document).ready(function{
            $.ajax({
                type: "GET",
                url: "users",
                dataType: "xml",
                success: function(xml){
                    $("#content").append("<table>");
                    $(xml).find("user").each(function(){
                        var firstName = $(this).find("firstName").text();
                        var lastName = $(this).find("lastName").text();
                        var password = $(this).find("password").text();
                        var email = $(this).find("email").text();
                        $("#content").append("<tr>");
                        $("#content").append("<td>" + firstName + "</td>");
                        $("#content").append("<td>" + lastName + "</td>");
                        $("#content").append("<td>" + password + "</td>");
                        $("#content").append("<td>" + email + "</td>");
                        $("#content").append("</tr>");
                    });
                    $("#content").append("</table>");
                }
            });
        });
    </script>
</head>
<body>
    <div id="content"></div>
</body>

servlet:

@WebServlet("/users")
public class users extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
public users() {
    super();
    // TODO Auto-generated constructor stub
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("text/xml;charset=UTF-8");
    usuarioDAO uDAO = new usuarioDAO();
    response.getWriter().write(uDAO.getAllUsers());
}

usuarioDAO:

public String getAllUsers()
{
    String xml = "";
    xml += "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
    xml += "<users>";
    try
    {
        getAllUsers = con.prepareStatement("SELECT * FROM users");
        synchronized(getAllUsers)
        {
            ResultSet res = getAllUsers.executeQuery();
            while (res.next())
            {
                xml += "<user>";
                xml += "<firstName>" + res.getString("firstName") + "</firstName>";
                xml += "<lastName>" + res.getString("lastName") + "</lastName>";
                xml += "<password>" + res.getString("password") + "</password>";
                xml += "<email>" + res.getString("email") + "</email>";
                xml += "</user>";
            }
        }
        getAllUsers.close();
    }
    catch (Exception ex)
    {
        System.out.println(ex);
    }
    xml += "</users>";
    return xml;
}

就是这样,你能否告诉我我做错了什么?

1 个答案:

答案 0 :(得分:0)

与此处相同的问题:

Using .after() to add html closing and open tags

您正在尝试将表格标记添加为纯文本,但它无效。而不是那样,首先在页面中添加一个完整的表(也是tr)标签,然后在其中添加其他元素。完整的元素,而不仅仅是局部的!

<强>已更新

这样的事情:

                $("#content").append("<table id='table'></table>");
                var i = 0;
                $("#existingElement").html(content);
                $("#existingElement").find("user").each(function(){
                    var firstName = $(this).find("firstName").text();
                    var lastName = $(this).find("lastName").text();
                    var password = $(this).find("password").text();
                    var email = $(this).find("email").text();
                    var rowid = "row"+id;
                    $("#table").append("<tr id='"+rowid+"'></tr>");
                    $("#"+rowid).append("<td>" + firstName + "</td>");
                    $("#"+rowid).append("<td>" + lastName + "</td>");
                    $("#"+rowid).append("<td>" + password + "</td>");
                    $("#"+rowid).append("<td>" + email + "</td>");
                });