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


Posted in jQuery onMarch 04, 2021

原始代码是这样的:

<div class='control-group'>
   <label class='control-label' for='inputSelect'>所属单位</label>
   <div class='controls'>
    <select id='inputSelect' name="acCpname" onchange="updateAc()">

    <c:forEach items="${list }" var="list">
     <option value="${list.cpname}">${list.cpname }</option>
    </c:forEach>
    </select>
   </div>
   </div>
   <div class='control-group'>
   <label class='control-label'>所需印章</label>
   <div class='controls' id="updateac" style="height: 40px">
    <c:if test="${empty sealtables}">
    <label class='radio inline'> 无可用印章,请前往申请印章 </label>
    </c:if>
    <c:if test="${not empty sealtables }">
    <c:forEach items="${sealtables}" var="sealtable"
     varStatus="status">
     <label class='radio inline'> <input type='checkbox'
     name="selectSealType" value='${sealtable.sealtype}' />
     ${sealtable.sealtype}
     </label>
    </c:forEach>
    </c:if>
   </div>
   </div>

效果截图:

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

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

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

为下拉列表添加onchange事件:

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

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

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

<script>
 function updateAc() {
 $.ajax({
  type : "POST",
  url : '${pageContext.request.contextPath}/updateAc.action',
  data : {
  company : $('#inputSelect').val()
  },
  dataType : "html",
  cache : false,
  async : true,
  contentType : "application/x-www-form-urlencoded;charset=utf-8",
  success : function(data) {
  $("#updateac").html(data);
  },
  error : function() {
  }
 });
 }
</script>

提交给updateAc.action:

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

@RequestMapping(value = "/updateAc.action")
  public ModelAndView updateComp(HttpServletRequest request,Model model){
   ModelAndView modelAndView = new ModelAndView();
   String companyname = request.getParameter("company");
   List<Sealtable> sealtables = service.sealTableBySealCpName(companyname);
   modelAndView.addObject("sealtables", sealtables);
   modelAndView.setViewName("comp");
   return modelAndView;
  }

comp.jsp:

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

<%-- <%@ include file="model.jsp"%> --%>
<div class='controls' id="updateac" style="margin-left: -20px;margin-top: -15px">
 <c:if test="${empty sealtables}">
  <label class='radio inline'> 无可用印章,请前往申请印章 </label>
 </c:if>
 <c:if test="${not empty sealtables }">
  <c:forEach items="${sealtables}" var="sealtable" varStatus="status">
   <label class='radio inline'> <input type='checkbox'
    name="selectSealType" value='${sealtable.sealtype}' />
    ${sealtable.sealtype}
   </label>
  </c:forEach>
 </c:if>
</div>

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

总结

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

jQuery 相关文章推荐
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
Jquery获取radio选中值实例总结
Jan 17 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
jquery实现广告上下滚动效果
Mar 04 #jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
jquery实现穿梭框功能
Jan 19 #jQuery
jQuery实现穿梭框效果
Jan 19 #jQuery
You might like
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
什么是JavaScript
2009/08/13 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
javascript实现表单验证
2016/01/29 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Python学习资料
2007/02/08 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
python文件编写好后如何实践
2020/07/07 Python
html5新特性与用法大全
2018/09/13 HTML / CSS
省级四好少年事迹材料
2014/01/25 职场文书
公证书样本
2014/04/10 职场文书
迎新生欢迎词
2015/01/23 职场文书
检讨书范文
2015/01/27 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
客户答谢会致辞
2015/07/30 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers