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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现判断上传图片类型和大小的方法示例
Apr 11 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 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
一个程序下载的管理程序(二)
2006/10/09 PHP
基于PHP文件操作的详解
2013/06/05 PHP
关于php循环跳出的问题
2013/07/01 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php程序内部post数据的方法
2015/03/31 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
『jQuery』取指定url格式及分割函数应用
2013/04/22 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
2016/01/05 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
开工仪式策划方案
2014/05/23 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
小学班级管理心得体会
2016/01/07 职场文书
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL