如何使用连接Servlet的jQuery AJAX改变JSP页面内容？

Question

我是 JSP 的新手。我的问题是，我想在按钮单击事件中使用 AJAX 更改我的 JSP 页面内容。我该怎么做..?

This is my 'AjaxTest' JSP file

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

        <script type="text/javascript">
            $(document).ready(function () {
                $('#GetData').click(function () {

            <%--
            I want correct codes here,
            that connects to my 'AjaxData' servlet
            and get it's xml content by tags
            and place them in '#PlaceData' paragraph.
            --%>

                });
        </script>

    </head>
    <body>        
        <button id="GetData" onclick="loadData">Load</button>

        <p id="PlaceData"></p>
    </body>
</html>

This is my 'AjaxData' servlet GET method

protected void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setContentType("text/xml");
            response.setCharacterEncoding("UTF-8");

            String content = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>"
                    + "<person1>"
                    + "<firstname>"
                    + "Indunil"
                    + "</firstname>"
                    + "<lastname>"
                    + "Girihagama"
                    + "</lastname>"
                    + "</person1>";

            response.getWriter().write(content);
        }

请告诉我使用 jQuery AJAX..

解决问题的正确代码

Answer 1

我找到了解决方案

AjaxTest.jsp file

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function () {

                $("#GetData").mouseenter(function () {
                    $(this).html('Load Content');
                });

                $("button").click(function () {

                    $.ajax({
                        type: "GET",
                        url: "AjaxData",
                        dataType: "xml",
                        success: function (xml) {
                            $("#PlaceData").html("<hr>");

                            $(xml).find('product').each(function () {

                                var id = $(this).find('id').text();
                                var name = $(this).find('name').text();
                                var price = $(this).find('price').text();
                                var discount = $(this).find('discount').text();

                                $("#PlaceData").append(id + "<br>");
                                $("#PlaceData").append(name + "<br>");
                                $("#PlaceData").append(price + "<br>");
                                $("#PlaceData").append(discount + "<br>");
                                $("#PlaceData").append("<hr>");
                            });

                            $("#GetData").html('AJAX Request is succeded!');
                        },
                        error: function () {
                            $("#GetData").html('An error occurred while processing XML file!');
                        }
                    });
                });
            });
        </script>
    </head>

    <body>        
        <button id="GetData" onclick="loadData">Load Content</button>

        <div id="PlaceData">            
            <hr>
        </div>
    </body>
</html>

AjaxData [Servlet]

protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/xml");
        response.setCharacterEncoding("UTF-8");

        String content = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"
                + "<products>\n"
                + " <product>\n"
                + "     <id>P-22345</id>\n"
                + "     <name>LCD Television</name>\n"
                + "     <price>0</price>\n"
                + "     <discount>5%</discount>\n"
                + " </product>\n"
                + " <product>\n"
                + "     <id>P-13245</id>\n"
                + "     <name>Mac Mini</name>\n"
                + "     <price>0</price>\n"
                + "     <discount>2%</discount>\n"
                + " </product>\n"
                + " <product>\n"
                + "     <id>P-52346</id>\n"
                + "     <name>Home Theatre</name>\n"
                + "     <price>0</price>\n"
                + "     <discount>1%</discount>\n"
                + " </product>\n"
                + " <product>\n"
                + "     <id>P-78385</id>\n"
                + "     <name>Laptop Computer</name>\n"
                + "     <price>00</price>\n"
                + "     <discount>5%</discount>\n"
                + " </product>\n"
                + " <product>\n"
                + "     <id>P-78385</id>\n"
                + "     <name>Desktop Computer</name>\n"
                + "     <price>00</price>\n"
                + "     <discount>7%</discount>\n"
                + " </product>\n"
                + "</products>";

        response.getWriter().write(content);
    }

web.xml file

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
     version="3.1">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>
    <servlet>
        <servlet-name>AjaxData</servlet-name>
        <servlet-class>AjaxData</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AjaxData</servlet-name>
        <url-pattern>/AjaxData</url-pattern>
    </servlet-mapping>
</web-app>

如何使用连接Servlet的jQuery AJAX改变JSP页面内容？

How to change JSP page content using jQuery AJAX that connects Servlet?

javascript

ajax

jquery

jsp

jquery-ajaxq