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

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

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

效果图

结构

 

     <body>
         <fieldset>
             <ledend>Demo 1</ledend>
             <form>
                 Name <input type="text" id="fullname">
                 <input type="button" value="Hello" id="bttHello">
                 <br>
                 <span id="result1"></span>
             </form>
         </fieldset>

         <fieldset>
             <ledend>Demo 2</ledend>
             <form>
                 Number 1<input type="text" id="number1"><br>
                 Number 2<input type="text" id="number2"><br>
                 Result<span id="result2"></span><br>
                 <input type="button" value="Sum" id="bttSum">

             </form>
         </fieldset>

     </body>

body部分

     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
         <title>Demo Ajax</title>
         <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
         <script type="text/javascript">
             $(document).ready(function() {
                 $('#bttHello').click(function() {
                     var fullname = $('#fullname').val();
                     $.ajax({
                         type: 'POST',
                         data: {
                             fullname: fullname,
                             action:'demo1'
                         },
                         url: 'AjaxController',
                         success: function(result) {
                             $('#result1').html(result);
                         }
                     });
                 });

                 $('#bttSum').click(function() {
                     var number1 = $('#number1').val();
                     var number2 = $('#number2').val();
                     $.ajax({
                         type: 'POST',
                         data: {
                             number1:number1,
                             number2:number2,
                             action:'demo2'
                         },
                         url: 'AjaxController',
                         success: function(result) {
                             $('#result2').html(result);
                         }
                     });
                 });
             });

         </script>
     </head>

Ajax部分

     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
         // TODO Auto-generated method stub
         response.setContentType("text/plain");
         PrintWriter out = response.getWriter();
         String action = request.getParameter("action");
         if(action.equals("demo1")){
             String fullname = request.getParameter("fullname");
             out.print("Hello"+fullname);
         }
         else if(action.equals("demo2")){
             int number1 = Integer.parseInt(request.getParameter("number1"));
             int number2 = Integer.parseInt(request.getParameter("number2"));
             out.println(number1+number2);
         }

     }

Servlet部分

AJAX with JSP and Servlet（代码）的更多相关文章

  1. 利用js+ajax在jsp与servlet间进行简单数据交换

    直接上代码 jsp <%@ page language="java" contentType="text/html; charset=utf-8" pag ...

  2. ajax从jsp向servlet传值

    function Delete(s){ xmlHttp=new XMLHttpRequest(); var url = "/emp/FindSpecial?selcol=" +s; ...

  3. 如何在java代码中调用一个web项目jsp或者servlet

    有时候需要调用一个web项目的jsp或者servlet,但是执行内部的代码,并不是打开jsp,例如需要在一段java代码中清除一个web项目中的缓存,那么可以把清除缓存的代码放在该web项目的一个se ...

  4. 纯Html+Ajax和JSP两者对比的个人理解

    最近写个人web,用jsp+servlet做,突然想到一个问题:html+ajax似乎和jsp实现效果一样:那么,两者到底有什么区别呢? 这里参考老猿的一段话: 全站ajax会维护大量的js代码,如何 ...

  5. JSP与Servlet之前台页面自动回复之实现

    [JSP与Servlet之前台页面自动回复之实现] 该内容 来自于imooc的一个视屏教程.http://www.imooc.com/video/4562 就是当点击 发送 的时候把这个对话框内容添加 ...

  6. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发，对Servlet和JSP的工作原理和生命周期有深入了解，熟练的使用JSTL和EL编写无脚本动态页面，有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

  7. 走进JavaWeb技术世界2：JSP与Servlet的曾经与现在

    转载自:码农翻身 转自: 刘欣 码农翻身 1周前 我是Servlet, 由于很多框架把我深深地隐藏了起来,我变得似乎无关紧要了,很多人也选择性的把我给遗忘了. 其实,我还活得好好的呢, 只不过是从前台 ...

  8. JavaWeb中的关于html、jsp、servlet下的路径问题

    1 前言 本文将对近期项目练习中出现的关于文件路径的问题进行分析和总结,主要涉及html页面中的href及ajax指向路径.jsp页面中href指向路径及servlet转发或重定向路径等内容,本文的分 ...

  9. 一、JSP、servlet、SQL三者之间的数据传递(前台与后台数据交互)

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

随机推荐

  1. 从0开始学爬虫7之BeautifulSoup模块的简单介绍

    参考文档: https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ # 安装 beautifulsoup4 (pytools) D:\pyt ...

  2. shell编程系列5--数学运算

    shell编程系列5--数学运算 方法1 expr $num1 operator $num2 方法2 $(($num1 operator $num2)) expr操作符对照表1 操作符 含义 num1 ...

  3. linux安装上传下载工具lrszs

    普通用户下使用sudo获取root权限,root用户直接安装: [mall@VM_0_7_centos ~]$ sudo yum -y install lrzsz Loaded plugins: fa ...

  4. Flink MysqlSink 简单样例

    在大数据领域中,有很多nosql 的数据库,典型的 hbase,可以实现大数据量下的快速查询,但是关系型数据的地位还是没办法替代.比如上个项目中,计算完的结果数据,还是会输出到关系型数据库当中.Fli ...

  5. WebService学习总结(三)——使用JDK开发WebService(转)

    一.WebService的开发手段 使用Java开发WebService时可以使用以下两种开发手段 1. 使用JDK开发(1.6及以上版本) 2.使用CXF框架开发(工作中) 二.使用JDK开发Web ...

  6. ip地址分类和网段详解

    IP地址分类/IP地址10开头和172开头和192开头的区别/判断是否同一网段 简单来说在公司或企业内部看到的就基本都是内网IP,ABC三类IP地址里的常见IP段. 每个IP地址都包含两部分,即网络号 ...

  7. 复习sql server 2000 MSDE2000 ，安装，打补丁，开1433端口。

    前言: 由于工作需要,一个仍在使用的古董软件需要安装配置. 原有系统是在主机部署,单机安装sql2000,其他机器(分机)也单机部署软件,部署sql2000,通过dtsrun /f sync.dts( ...

  8. linq list select用法注意事项

    下面是我自己做的一个例子 List<CR_CustomerOrder> OrdList = new List<CR_CustomerOrder>(); var b = OrdL ...

  9. vue 的反向代理

    情景描述: 原本的vue打包文件是放在.net core 项目的www文件夹下去发布的.这样运行没问题,但是公司领导让服务器单独部署vue,前后端要完全分离.然后这样就出问题了,有一个上传接口的地址一 ...

  10. Centos7防火墙关闭和启用iptables操作

    https://yq.aliyun.com/ziliao/33590前序 还是docker惹得最近做的系统都是上的centos7的系统带来的一系列的新环境的适应 补记下:在使用oracle vmbox ...