首页
学习
活动
专区
工具
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.7K81

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

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

    2K21

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

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

    66200

    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上,它显示了对象公共方法。...所列方法可以页面中调用,允许你,第一次,运行服务器上对象方法。下图显示了调试页样子:

    75310

    SSM整合案例

    Mybaits核心配置文件 web.xml配置文件 使用分页插件 controller层 查询所有员工并分页显示方法 如何通过spring单元测试,完成对上面controller层代码测试呢...看下面的步骤 查询员工思路---ajax 新增员工思路 ajax使用时需要注意问题:当我们使用ajax向某个标签中追加数据时候。...--配置springmvc前端控制器--> DispatcherServlet <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方法比较安全。

    68550

    SpringMVC返回数据到视图

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

    98710

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

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

    1.3K30

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

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

    2K100

    开发中经常碰到问题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装载就是服务端返回jsoncurrent数据...⑧: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为签到签退按钮下一个divid用来显示考勤结果) ?...返回签到结果0失败,1成功,2已签到,并将数据返回servlet 3、servlet将数据直接响应给前台页面,jsp页面通过Ajax获取信息,更根据相应显示相应提示语。...返回签退结果0失败,1成功,2已签到,并将数据返回servlet 3、servlet将数据直接响应给前台页面,jsp页面通过Ajax获取信息,更根据相应显示相应提示语。

    2.2K30

    JavaWeb项目(登录注册页面)全过程详细总结

    ) 2.3.4 发送邮件Servlet(EmailServlet) 项目需求: 实现登录页面: 顶部有logo栏目 左侧提供轮播图 提供两种登录方式:①账号密码登录 ②邮箱+验证码登录 登录成功后跳到显示...:none 和 block 来切换实现,在显示上是可以做到切换显示和隐藏,但是再代码层两种方式代码都存在,在表单提交,就会出现问题,因为其提交两种方法中4个输入框中内容,且无法通过 required...转换思路: 在 login.jsp 中使用一个容器来占位 通过 js 控制具体显示是哪种登录方法 html 代码 在 login.js 中定义...: 邮箱, 显示昵称(只用于显示, 没有特别的要求), 昵称字符集编码 // 真正要发送, 邮箱必须是真实有效邮箱。...:检验验证码是否正确是 session 中取出 emailCode 内容(在EmailServlet.java中在随机创建出6位验证码后就把其存入 session 中了)与用户输入进行核对。

    5.8K41

    Web-第十五天 Ajax学习【悟空教程】

    3.1 通过设置给AJAX引擎回调函数获得服务器响应数据 3.2 使用JavaScript在指定位置,显示响应数据,从而局部修改页面的数据,达到局部刷新目的。...服务器获得用户名,并通过用户名查询用户 a) 如果用户名存在,返回不可用提示 b) 如果用户名可用,返回可用提示 3. 根据服务器响应json数据,控制提示信息显示和提交按钮是否可用。...类似百度,当我们输入搜索条件,将自动填充我们需要数据,并提供选择,我们将此类功能称为:自动填充(autocomplete)。...JSON采用完全独立于语言文本格式,就是说不同编程语言JSON数据是一致。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。 ?...和css,用于显示自动填充数据div ?

    1.5K30
    领券