欢迎任何形式的转载，但请务必注明出处。
本章内容来自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部分
时间： 2024-12-14 08:33:37