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

本章内容来自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

AJAX with JSP and Servlet（代码）相关推荐

  1. ajax连接jsp或servlet,获取MySql为数据

    当然代码并没有严格按规范写...数据库连接和操作的代码应该单独写出来... html 页面中的JS代码也应该单独写一个JS文件,然后引入页面即可.其次,jsp中的代码写到servlet中效果是一样的. ...

  2. JSP和Servlet互相传输数据的过程中产生的乱码问题及解决方案（没有使用AJAX的情况）...

    一. 服务器端接收到浏览器端传送的数据出现乱码的问题!!!(Servlet端获取数据时出现乱码) 1. 为什么表单提交中文会出现乱码的问题?(非AJAX方式) 浏览器端:当表单提交时,浏览器会对中文参 ...

  3. servlet向ajax传递数据库,一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)...

    背景: 目前业界很流行的MVC(model-view-control)开发模式,理解为 模型是Bean, 视图是 Html/Jsp, 控制是Servlet, 关联数据库的Dao web的运行机制: 数 ...

  4. 基于javaweb+jsp的健身房信息管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)

    基于javaweb+jsp的健身房信息管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax) 运行环境 Java≥8.MySQL≥5.7.T ...

  5. 基于javaweb+jsp的二手物品交易管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)

    基于javaweb+jsp的二手物品交易管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax) JavaWeb JavaBean JSP M ...

  6. Java web实验购物网站（IDEA开发环境，JavaScript，JSP，Servlet，jQuery，Ajax，MySql等）——实现购物车

    Java web实验购物网站 实验要求 实验开发工具及使用技术 准备工作 完整项目目录结构 实验结果展示 实验步骤 小结 项目完整代码及数据库.SQL文件 自学网站 2021.05.25补充 实验要求 ...

  7. 名师讲坛——Java Web开发实战经典基础篇（JSP、Servlet、Struts、Ajax）

    [书名]<名师讲坛--Java Web开发实战经典基础篇(JSP.Servlet.Struts.Ajax)> [作者]李兴华.王月清 [ISBN]9787302231585 ­}:YKf: ...

  8. 名师讲坛—Java Web开发实战经典基础篇(JSP、Servlet、Struts、Ajax)

    名师讲坛-Java Web开发实战经典基础篇(JSP.Servlet.Struts.Ajax) 基本信息 作者: 李兴华    王月清   出版社:清华大学出版社 ISBN:9787302231585 ...

  9. 基于javaweb+jsp的医院住院管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax)

    基于javaweb+jsp的医院住院管理系统(JavaWeb JSP MySQL Servlet SSM SpringBoot Layui Ajax) 运行环境 Java≥8.MySQL≥5.7.To ...

  10. ajax获取jsp数据,如何使用ajax调用从servlet到jsp获取arraylist数据

    我通过widow.load()事件上的ajax调用来调用servlet.但是当我想在警报框中显示ajax调用成功后获得的值时,它显示[object XMLDocument]我不知道为什么.这是第一次我 ...

最新文章

  1. Jdbc模版式写法与Spring-JdbcTemplate的比较
  2. 巨坑 之 pip install 和 conda install 的区别 以及 查看 和 修改 虚拟环境下运行路径
  3. Python 找出1与100之间的全部“同构数”
  4. html文件很大,webpack打包之后的文件过大如何解决
  5. 与人方便，随遇而安!
  6. 蓝桥杯 ALGO-142 算法训练 P1103
  7. 【C++ 程序】 解线性方程组（Cramer法则）
  8. GoFrame+vue的前后端分离开源项目
  9. 最大子列和问题（C语言）
  10. 软件测试面试中90%会遇到的问题;你会搭建测试环境吗?
  11. office2010 启动man_解决word2010启动慢的两种方法
  12. IDEA搭建POI导入导出Excel入门版
  13. 华为linux系统能用Cad么,华为平板能装cad画图吗 华为平板可以用cad软件吗？
  14. 利用Python爬虫抓取猫眼电影排行（BeautifulSoup方式初试手，欢迎改进）
  15. Dom——仿淘宝关闭二维码
  16. 浪潮和思科联合 华为、新华三怎么看？
  17. 转载：基于MATLAB的几种图像分割算法
  18. 基本数据结构——线性结构（有序表）
  19. 删除字符串中数字字符
  20. 大数据风控怎么做？新网银行的做法是......

热门文章

  1. awd赛题的flag是什么意思_记一次AWD自动获取flag并提交
  2. python获取随机大小写字母_python获取随机大小写字母
  3. linux ip命令dhcp,嵌入式linux通过DHCP自动获取IP地址实现获取
  4. 【Java程序设计】异常处理
  5. 依赖反转原则（DIP）
  6. RDD创建及算子分类及应用
  7. 获取指定域名的IP地址
  8. 8个让DevOps转型取得成功的关键步骤
  9. MQTT的学习研究（十三) IBM MQTTV3 简单发布订阅实例
  10. css 动画类库Animate.css