好资源导航 » 文章资讯 » ajax jquery实现页面某一个div的刷新效果

ajax jquery实现页面某一个div的刷新效果

2023-07-04 18:58:03 465

原始代码是这样的：


所属单位




${list.cpname}

所需印章无可用印章，请前往申请印章 ${sealtable.sealtype}

效果截图：

想要实现的效果，图片红色标记的部分，点击下拉列表，下面的复选框的值跟随下拉列表的变化而变化。

首先说一下解决思路：为下拉列表添加onchange事件，然后ajax异步提交给controller，进行数据库查询，然后返回ModelAndView，ModelAndView设置的view为一个新的jsp页面，该jsp页面里面嵌套的代码为要改变的div代码。

为下拉列表添加onchange事件：

为时间添加ajax异步刷新事件：

返回的压面直接在div中加载

提交给updateAc.action:

根据下拉列表选择的值然后从数据库中进行查找该值对应的信息返回，然后渲染comp.jsp页面

@RequestMapping(value="/updateAc.action")
publicModelAndViewupdateComp(HttpServletRequestrequest,Modelmodel){
ModelAndViewmodelAndView=newModelAndView();
Stringcompanyname=request.getParameter("company");
Listsealtables=service.sealTableBySealCpName(companyname);
modelAndView.addObject("sealtables",sealtables);
modelAndView.setViewName("comp");
returnmodelAndView;
}

comp.jsp:

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/fmt"prefix="fmt"%>

<%--<%@includefile="model.jsp"%>--%>


无可用印章，请前往申请印章




${sealtable.sealtype}

现在就可以实现页面的局部刷新。

总结

到此这篇关于ajaxjquery实现页面某一个div刷新效果的文章就介绍到这了,更多相关ajaxjquery页面div刷新内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

ajax jquery实现页面某一个div的刷新效果

热门推荐

随机推荐