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

我是JSP新手。我的问题是，我想改变我的JSP页面内容使用AJAX按钮点击事件.. 我该怎么做..？如何使用连接Servlet的jQuery AJAX更改JSP页面内容？

这是我的 'AjaxTest' JSP文件

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

这是我的 'AjaxData' servlet的GET方法

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

来源

2015-07-19 Indunil Girihagama

阅读[AJAX]（http://api.jquery.com/jQuery.ajax/） – vinayakj

我发现溶液

AjaxTest.jsp文件

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

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

来源

2015-07-20 14:30:38

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

回答

相关问题