个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 07:08:30 25 4
gpt4 key购买 nike

我是 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 的问题..

最佳答案

我找到了解决办法

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>$500</price>\n"
                + "     <discount>5%</discount>\n"
                + " </product>\n"
                + " <product>\n"
                + "     <id>P-13245</id>\n"
                + "     <name>Mac Mini</name>\n"
                + "     <price>$700</price>\n"
                + "     <discount>2%</discount>\n"
                + " </product>\n"
                + " <product>\n"
                + "     <id>P-52346</id>\n"
                + "     <name>Home Theatre</name>\n"
                + "     <price>$500</price>\n"
                + "     <discount>1%</discount>\n"
                + " </product>\n"
                + " <product>\n"
                + "     <id>P-78385</id>\n"
                + "     <name>Laptop Computer</name>\n"
                + "     <price>$1500</price>\n"
                + "     <discount>5%</discount>\n"
                + " </product>\n"
                + " <product>\n"
                + "     <id>P-78385</id>\n"
                + "     <name>Desktop Computer</name>\n"
                + "     <price>$1000</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>

关于javascript - 如何使用连接Servlet的jQuery AJAX更改JSP页面内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31504621/

25 4 0
文章推荐： html - 右外边距为负的 float 元素
文章推荐： c++ - 如何比较两个不同类的对象？
文章推荐： c++ - Firebreath 事件确认
文章推荐： javascript - 脚本未直接加载
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com