首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我从servlet返回时如何显示不同的div?

当从servlet返回时,可以通过在前端页面中使用JavaScript来控制显示不同的div。以下是一种实现方式:

  1. 在前端页面中定义多个div,每个div设置一个唯一的id,用于标识不同的div。
代码语言:txt
复制
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
  1. 在servlet中根据需要的条件,通过设置响应的数据来控制显示不同的div。可以使用JSON格式的数据来传递给前端页面。
代码语言:txt
复制
// 根据条件设置响应数据
String responseData = "";
if (condition1) {
    responseData = "{\"divToShow\": \"div1\"}";
} else if (condition2) {
    responseData = "{\"divToShow\": \"div2\"}";
} else {
    responseData = "{\"divToShow\": \"div3\"}";
}

// 设置响应内容类型为JSON
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");

// 将响应数据写入响应流
response.getWriter().write(responseData);
  1. 在前端页面中使用JavaScript获取响应数据,并根据数据中指定的div id来显示对应的div。
代码语言:txt
复制
<script>
    // 发送请求获取响应数据
    // ...

    // 解析响应数据
    var responseData = JSON.parse(xhr.responseText);
    var divToShow = responseData.divToShow;

    // 根据div id显示对应的div
    document.getElementById(divToShow).style.display = "block";
</script>

这样,根据servlet返回的条件,前端页面就可以显示不同的div了。

在腾讯云的产品中,可以使用腾讯云的云服务器(CVM)来部署运行servlet应用。具体可以参考腾讯云云服务器产品介绍:https://cloud.tencent.com/product/cvm

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。

我这篇的标题之所以用了三句,是为了方便其他人好查找;       这里介绍的方法有什么用呢? 使用它,就可以无闪刷新页面,并且从数据库获取实时改变的数据反馈回界面,显示出来!.../EN"> 2 3 4 5 var xmlHttp; 6 //创建xmlHttpRequest对象 7 8 //下面将会针对不同的浏览器创建对象...; 52 return; 53 } 54 } 55 56 57 58 //回调函数,就是刚才定义的函数,用来获取从服务器文件,asp或者php或者其他返回的信息...82 //还有一种返回式以字符串的形式返回,responseText,这个可以用下标法逐个输出,但是注意,逐个输出的是字符, 83 //也就是说,你想要的一个字符串会被拆成几份...""; 12 //这里的 标签就是刚才(" "),里面要填的,通过这方式,分别输出、获取不同的值,下同 13 echo "" .

7.8K81

jQuery 遍历:思路总结,项目场景中如何处理控制获取的 each 遍历次数?

6 条数据能够满足我们的需求,但是如果我们在其他页面也从 data 中取数据,数据条数就可能不是 6 条(这里仅说明的情况——根据实体类的定义走),当我们直接使用 jquery 进行 each...---- 一、项目场景分析 今天在做一个项目时,遇到了列表遍历的一个问题:定义一个实体类 Page,数据写死,默认每页显示 6 条数据,通过 service 处理 dao 查询数据库的结果,在当前 new...的对象 page 中存放 6 条数据并返给 servlet,servlet 通过返回 json 的形式将 page 对象返回给前台。...ul里面 $("#popularityroute").append(li); }) 遍历结果如下图所示: 2.3、遍历数据如何修改的问题暴露 但是如果我们在其他页面也从 data 中取数据,数据条数就可能不是...如下图所示: 解决方式:index 的索引默认是从 0 开始计,显示 4 条数据我们只需要在索引值达到 3 时把遍历停掉即可: if(index>3){ return true; } 补充:这里使用了

1.4K30
  • 如何在 jquery 中控制获取 each 的遍历次数(需求场景分析与处理思路总结)

    、如何解决 jquery 中控制获取 each 的遍历次数 总结 ---- 前言 今天在做一个项目时,遇到了列表遍历的一个问题: 定义一个实体类 Page,数据写死,默认每页显示 6 条数据,通过 service...处理 dao 查询数据库的结果,在当前 new 的对象 page 中存放 6 条数据并返给 servlet,servlet 通过返回json 的形式将 page 对象返回给前台。...前台接收到的数据即为 data,里面默认在一个 page 页面显示的是 6 条数据,个别页面可能直接取 6 条数据能够满足我们的需求,但是如果我们在其他页面也从 data 中取数据,数据条数就可能不是6...3、遍历数据如何修改的问题暴露 但是如果我们在其他页面也从 data 中取数据,数据条数就可能不是 6 条(这里仅说明 的情况——根据实体类的定义走),当我们直接使用 jquery 进行 each...解决方式:index 的索引默认是从 0 开始计,显示 4 条数据我们只需要在索引值达到 3 时把遍历停掉即可: if(index>3){ return true; } 补充:这里使用了 jquery

    2.1K21

    关于利用maven搭建ssm的博客,我们一起来探讨下问的最多的问题

    :端口/工程名/personController/showPerson时,数据正常显示如下 ?     ...当我们直接请求jsp时,只有title没有数据,如下 ?     这是为什么?     ...当变量的作用域是page,它的有效范围只在当前jsp页面里有效;       当变量的作用域是request,它的有效范围是当前请求周期,所谓请求周期,就是指从http请求发起,到服务器处理结束,返回响应的整个过程...-- ${expression} EL的语法结构 --> div> EL能够访问页面的上下文以及不同作用域中的对象 ,取得对象属性的值,或执行简单的运算或判断操作,用来简化JSP中的java...我们回到问题:当我们请求http://localhost:端口/工程名/personController/showPerson时,数据正常显示,而当我们直接请求jsp时,只有title却没有数据,这是为什么

    66300

    Solr的原理及在项目中的使用实例.

    当我们在前台页面搜索商品名称关键词时, 我们这时是在Solr库中去查找相应的商品信息, 然后将搜索关键词高亮. 2,那么Solr库中的商品信息又是如何添加的呢? ...当我们在给商品上架的时候, 将商品信息update 到mysql数据库中的bbs_product表中, 然后同样的将相应的信息 添加到Solr库中....这里我们还用到了skuQuery, 因为一个商品中不同的颜色不同的尺码都可能有不同的价格, 我们在这里 是取到同一个productId下价格最小的来给显示~ 然后再就是将我们已经设置好的SolrInputDocument...我把已经做好的页面展示一下:  那么就进入到实际的开发当中:  当我们在搜索框输入2016 且点击 搜索时:  然后到Controller层去找到search方法: 1 @Autowired...三, 使用Redis 取出商品品牌列表 首先 当我们在后台添加或者修改品牌时, 我们应该同样将这个品牌添加到Redis中, 格式类似于: {"brandId":"brandName"} controller

    1.1K50

    DWR让Ajax如此简单(1)

    它具有一套Javascript功能集,它们把从HTML页面调用应用服务器上的Java对象的方法简化了。它操控不同类型的参数,并同时保持了HTML代码的可读性。...注意:找到有关Ajax的信息并不困难;网页上有几篇文章和博客的条目涵盖了这个主题,每一个都试图指出和评论这个概念的不同的方面。...当符合标准的搜索结果没有或太多时,用户就没有必要点击搜索按纽。 ·数据库查询并取回结果是由Ajax完成的。当用户按下显示结果按钮时,数据库执行搜索。...当DWR在调试模式时,你可以从HTMl网页中看到所有的可访问的Java对象。包含了可用对象列表的网页会出现在/WEBAPP/dwr这个url上,它显示了对象的公共方法。...所列方法可以从页面中调用,允许你,第一次,运行服务器上的对象的方法。下图显示了调试页的样子:

    75510

    Ajax从入门到静态发展

    readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。...思路 1.当用户松开键盘(输入内容)时向服务器发送请求,处理事件是onkeyup; 2.服务器得到客户端的请求数据之后,去数据库查询结果,返回查询结果到客户端; 3.客户端得到响应数据之后,自动填充到自动提示区域...; 4.在选中内容上,光标悬停会有背景突出显示; 5.当我们单击某个内容的时候,内容显示到搜索框,整个提示区域关闭; 步骤 1.构建页面,onkeyup事件 搜索框的onkeyup事件; div> 2.客户端请求服务器的数据 $.ajax({})–>Servlet–>业务层对象–>dao层对象–sql数据;...数组的长度 //console.log(result.length); //如何显示2条json

    10010

    SSM整合案例

    Mybaits核心配置文件 web.xml配置文件 使用分页插件 controller层 查询所有员工并分页显示的方法 如何通过spring单元测试,完成对上面controller层代码的测试呢...看下面的步骤 查询员工的思路---ajax 新增员工的思路 ajax使用时需要注意的问题:当我们使用ajax向某个标签中追加数据的时候。...--配置springmvc的前端控制器--> servlet> servlet-name>DispatcherServletservlet-name> servlet-class...,数据库返回给数据库后,进行校验,然后才会显示相关错误信息 //与前端你写错后,立马提示你有错误不同 @RequestMapping(value = "/emp",method = RequestMethod.POST...id,方便一会通过在按钮点击事件中获取到id值,从而通过ajax返回给服务器端,进行删除逻辑操作 使用ajax时,在获取到服务器端发送来的数据后,可以在成功的回调函数中,获取数据,然后通过append等方式

    4.1K21

    JavaScript : 浅讲ajax1.ajax入门案例

    方式的数据请求 当我们点击提交按钮,就alert()一下,如果成功的话,那么说明点击事件没有问题。...然后,找到一个network,以谷歌浏览器为例 Paste_Image.png network视图会把所有的数据交互显示出来,包括引入的 js , css文件,还有各种请求和回应,都会在这里显示出来。...1478830083421039505.png 因为MyServlet中没有返回什么东西,所以alert出来的是空。 好的,那我们给浏览器也返回一句话吧。...请求方式是get,并且只有当返回的状态码为200的时候,才会打印出responseText,这个就是对应的 ​out.println("你好,这是服务器返回的信息!"); 这句话。...1.5 基于post方式的数据请求 get方法会在URL地址栏里显示你提交所带的值,post方法不会。所以,相对来说,post方法比较安全。

    68950

    【Web实战-Tomcat-Servlet-Thymeleaf -JDBC-MySQL】浏览器页面显示数据库数据(水果库存系统)

    ---- 一、Thymeleaf - 视图模板技术 在开始,我们需要先了解一下Thymeleaf - 视图模板技术的使用,这是我们在使用Servlet时需要用到的技术。..."> 而后,当我们使用Thymeleaf技术的属性时,都需要在属性前添加th:的标志。...FruitDAO接口: 我们需要在浏览器页面中显示数据库的数据,就需要一个获取数据库所有信息的方法。...组件渲染页面 当我们打开对应的浏览器页面,就会向客户端中的Servlet组件发起一次请求,我们这时候将获取到的数据库数据保存到session保存作用域中,然后在HTML文件中进行渲染,之后将页面响应给客户端的浏览器中...* @create 2022-10-04 16:42 */ //Servlet从3.0版本开始,支持注解方式的注册 @WebServlet("/index") public class IndexServlet

    1.3K30

    SpringMVC返回数据到视图

    通过ModelAndView对象返回数据到视图 在SpringMVC中有一个ModelAndView对象,如其名,Model代表模型,View代表视图,这个名字就很好地解释了该类的作用——它用来存储模型数据以及显示该数据的视图名称...框架则会通过调用Spring配置文件中定义的视图解析器,对该对象进行解析,最后把结果数据传递到指定的视图上,这样我们就可以在视图中获得结果数据并显示出来了。 Spring的配置文件内容如下: 当我们只需要返回一个模型数据时,可以使用以下这个构造器: public class ModelAndView { ......,该注解可以从request对象中拿取预先存在的数据,然后绑定到配置该注解的参数上。...所以我们通过这个注解的特性可以事前配置一些公共的数据,或补全一些数据参数什么的。如果该注解是写在方法参数上,则是从Model对象中取出预先存在的数据绑定对应的参数上。

    1K10

    AJAX应用【股票案例、验证码校验】

    ,每隔两秒就和服务器进行一次交互 用到Ajax和setInterval()方法 html代码 使用div嵌套span和a标签来进行显示,span装载的就是服务端返回json的current数据 Servlet返回给浏览器的JSON数据,解析JSON数据,变成是JavaScript对象 ⑨:在页面上显示服务端带过来的数据,一般都是使用...div来显示【块级】,用控件绑定id,在JavaScript中得到控件,填充数据。...①②:鼠标移动到具体的股票链接的时候,会出现股票的详细信息时,这明显就是为超链接绑定了事件 ①③:股票的详细信息用一个框框装载着,那么我们就在css中初始化这个框框,它平时是不显示出来的,只用在鼠标移到它那里的时候才显示...如果不同,那么就返回一个打叉的图片 前台分析 绑定键盘输入事件 当输入数达到4的时候,就与服务器交互 得到服务器带过来的图片,使用DOM添加到对应的位置 后台分析 得到前台带过来的值 判断该值与Session

    2K100

    HTML ,XHTML,HTML5简介,js,JSP与Servlet的关系理解

    JSP(Java server page )是通过java语言实现的,是Java语言的一种使用方式,从其英文全称就可以看出它是Java服务器端页面,所以是动态页面。...HTML5 是如何起步的?...JSP标签有多种功能,比如访问数据库、记录用户选择信息、访问JavaBeans组件等,还可以在不同的网页中传递控制信息和共享信息。...使用Servlet产生动态页面,需要在代码中用out.print()打印输出很多HTML标签返回至客户端浏览器界面进行显示。在Servlet中,不得不将静态显示的内容和动态产生内容的代码混合在一起。...Servlet容器加载转换后的Servlet类,实例化一个对象处理客户端的请求,在请求处理完成后,相应至客户端浏览器界面进行显示【在Servlet容器实例化对象后的处理过程就和之前学习的Servlet的处理过程一样了点击打开链接

    10110

    开发中经常碰到的问题cookie和session问题,今天一并解决

    因此,在需要保存用户数据时,服务器程序可以把用户数据写到用户浏览器独占的session中,当用户使用浏览器访问其它程序时,其它程序可以从用户的session中取出该用户的数据,为用户服务。...image 不同浏览器访问Servlet1,再访问Servlet2,结果如下: ?...image 可以看到这时候name是null,也就是没有从session对象中取出值,因为360浏览器并没有运行Servlet1来创建Session对象,上面的session对象是Chrome浏览器独占的...image 1,浏览器A先访问Servlet1,这时候它创建了一个Session,ID号为110,然后Servlet1将这个ID号以Cookie的方式返回给浏览器A。...这就证明了我们之前图解的Session的原理,也就是服务器能够为不同的浏览器区分不同的Session的机制。

    3K21

    (修订版)AJAX应用!

    ,每隔两秒就和服务器进行一次交互 用到Ajax和setInterval()方法 1.3.1html代码 使用div嵌套span和a标签来进行显示,span装载的就是服务端返回json的current数据...⑧:JavaScript使用XMLHttpRequest对象得到Servlet返回给浏览器的JSON数据,解析JSON数据,变成是JavaScript对象 ⑨:在页面上显示服务端带过来的数据,一般都是使用...div来显示【块级】,用控件绑定id,在JavaScript中得到控件,填充数据。...①②:鼠标移动到具体的股票链接的时候,会出现股票的详细信息时,这明显就是为超链接绑定了事件 ①③:股票的详细信息用一个框框装载着,那么我们就在css中初始化这个框框,它平时是不显示出来的,只用在鼠标移到它那里的时候才显示...如果不同,那么就返回一个打叉的图片 2.1.1前台分析 绑定键盘输入事件 当输入数达到4的时候,就与服务器交互 得到服务器带过来的图片,使用DOM添加到对应的位置 2.1.2后台分析 得到前台带过来的值

    1.1K20

    JavaEE中,考勤(签到签退)功能的实现

    ,ajax直接显示结果) 2、在service的实现类编写签退的逻辑方法 3、dao层调用的方法与签到一致,无需添加 4、在原来的jsp页面中,编写ajax请求,处理从servlet传来的数据(result...页面中,编写ajax请求,处理从servlet传来的数据 ?...,无需添加 4、在原来的jsp页面中,编写ajax请求,处理从servlet传来的数据(result为签到签退按钮下的一个div的id用来显示考勤结果) ?...返回签到的结果0失败,1成功,2已签到,并将数据返回到servlet 3、servlet将数据直接响应给前台页面,jsp页面通过Ajax获取信息,更根据相应的值显示相应的提示语。...返回签退的结果0失败,1成功,2已签到,并将数据返回到servlet 3、servlet将数据直接响应给前台页面,jsp页面通过Ajax获取信息,更根据相应的值显示相应的提示语。

    2.2K30
    领券