AJAX with JSP and Servlet（代码）

最新推荐文章于 2025-12-28 16:49:38 发布

转载最新推荐文章于 2025-12-28 16:49:38 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/L-xmin/p/6714561.html

文章标签：

#java #javascript #ViewUI

欢迎任何形式的转载，但请务必注明出处。

本章内容来自YouTube需FQ（点击进入视频学习）

服务器配置等可以参看我其他文章。注释等后续再加

效果图

结构

 1     <body>
 2         <fieldset>
 3             <ledend>Demo 1</ledend>
 4             <form>
 5                 Name <input type="text" id="fullname">
 6                 <input type="button" value="Hello" id="bttHello">
 7                 <br>
 8                 <span id="result1"></span>
 9             </form>
10         </fieldset>
11         
12         <fieldset>
13             <ledend>Demo 2</ledend>
14             <form>
15                 Number 1<input type="text" id="number1"><br>
16                 Number 2<input type="text" id="number2"><br>
17                 Result<span id="result2"></span><br>
18                 <input type="button" value="Sum" id="bttSum">
19                 
20                 
21             </form>
22         </fieldset>
23 
24     </body>

body部分

 1     <head>
 2         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 3         <title>Demo Ajax</title>
 4         <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
 5         <script type="text/javascript">
 6             $(document).ready(function() {
 7                 $('#bttHello').click(function() {
 8                     var fullname = $('#fullname').val();
 9                     $.ajax({
10                         type: 'POST',
11                         data: {
12                             fullname: fullname,
13                             action:'demo1' 
14                         },
15                         url: 'AjaxController',
16                         success: function(result) {
17                             $('#result1').html(result);
18                         }
19                     });
20                 });
21                 
22                 $('#bttSum').click(function() {
23                     var number1 = $('#number1').val();
24                     var number2 = $('#number2').val();
25                     $.ajax({
26                         type: 'POST',
27                         data: {
28                             number1:number1,
29                             number2:number2,
30                             action:'demo2' 
31                         },
32                         url: 'AjaxController',
33                         success: function(result) {
34                             $('#result2').html(result);
35                         }
36                     });
37                 });
38             });
39 
40         </script>
41     </head>

Ajax部分

 1     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2         // TODO Auto-generated method stub
 3         response.setContentType("text/plain");
 4         PrintWriter out = response.getWriter();
 5         String action = request.getParameter("action");
 6         if(action.equals("demo1")){
 7             String fullname = request.getParameter("fullname");    
 8             out.print("Hello"+fullname);
 9         }
10         else if(action.equals("demo2")){
11             int number1 = Integer.parseInt(request.getParameter("number1"));
12             int number2 = Integer.parseInt(request.getParameter("number2"));
13             out.println(number1+number2);
14         }
15         
16     }

Servlet部分

转载于:https://www.cnblogs.com/L-xmin/p/6714561.html