jQuary 局部加载jsp

最新推荐文章于 2021-08-05 22:05:37 发布

秦丨竹

最新推荐文章于 2021-08-05 22:05:37 发布

阅读量212

点赞数

分类专栏： jsp 文章标签： jsp java

本文链接：https://blog.csdn.net/weixin_44898272/article/details/109105867

版权

jsp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天遇到一个问题：

需要用到JQuary局部加载

只要换一下之间的数据即可

在一个完整的jsp页面里，拿走公共的数据部分

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script >
    $(function(){
        $("div.left a").click(function(){
            //$("div.rigth").load($(this).attr("url"),{"name":"zhangsan"});
            url = $(this).attr("url");
            $.get(url,function(data){
                $("div.rigth").html(data);
            });
        });
    });
</script>

 <div class="content">
        <div class="left">
            <ul>
                <li><a href="javascript:void(0);" url="region/regionPart.jsp">区域信息管理</a></li>
                <li><a href="javascript:void(0);" url="depart/departPart.html">部门信息管理</a></li>
                <li><a href="javascript:void(0);" url="emp/empPart">员工信息管理</a></li>
            </ul>
        </div>
        <div class="rigth">
        </div>
    </div>

//三个目标代码之一
 <div class = "search">
			   <span>
				<input type="text" placeholder="请输入区域名称">
				<button>检索</button>
				<button onclick="javascript:window.location.href='region/addRegion.html'">添加</button>
			   </span>
			  </div>
				<table>
					<thead>
						<tr>
							<th>区域编号</th>
							<th>区域名称</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
					<%--<c:forEach var="region" items="${pageInfo.datas }"--%>
					<c:forEach var="region" items="${requestScope.regionList }"
							  varStatus="s">
							  <!-- varStatus代表迭代的状态。
							  		index: 当前迭代的位置，从0开始。
							  		current：代表当前迭代出来的对象。
							   -->
						<c:if test="${s.index%2==0 }">
							<tr class="odd">
						</c:if>
						<c:if test="${s.index%2!=0 }">
							<tr>
						</c:if>
							<td>${region.id}</td>
							<td>${region.name}</td>
							<td><button>编辑</button> <button>删除</button></td>
						</tr>
					</c:forEach>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="3" align="right">
								<select name="pageSize" onchange="changeSize(this.value)">
									<option value="5">5</option>
									<option value="10">10</option>
									<option value="15">15</option>
									<option value="20">20</option>
								</select>
								<script type="text/javascript">
									var pageSize = ${pageInfo.pageSize};
									console.log("pageSize:"+pageSize);
									options = document.getElementsByTagName("option");
									for(var i = 0;i<options.length;i++){
										if(options[i].value==pageSize){
											options[i].selected="selected"
										}
									}
								</script>
								<span><a href="region/allRegion.do?pageNum=1&pageSize=${pageInfo.pageSize}">首　页</a></span>
								<c:if test="${pageInfo.hasPrePage }">
								<span><a href="region/allRegion.do?pageNum=${pageInfo.prePage}&pageSize=${pageInfo.pageSize}">前一页</a></span>
								</c:if>
								<c:if test="${pageInfo.hasNextPage }">
								<span><a href="region/allRegion.do?pageNum=${pageInfo.nextPage}&pageSize=${pageInfo.pageSize}">后一页</a></span>
								</c:if>
								<span><a href="region/allRegion.do?pageNum=${pageInfo.pages}&pageSize=${pageInfo.pageSize}">末　页</a></span>
								共${pageInfo.total }条记录${pageInfo.pages }页
							</td>
						</tr>
					</tfoot>
				</table>
			</div>

这是把目标代码放在txt里的情况

这个放到jsp里的效果（是我想要的效果）

//公共代码
<%--
  Created by IntelliJ IDEA.
  User: 85894
  Date: 2020/10/15
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@page import="javax.servlet.jsp.jstl.core.LoopTagStatus"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <base href="${pageContext.request.contextPath}/">
    <meta charset="UTF-8">
    <title>区域信息管理</title>
    <link style="text:css" rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="main">
    <div class="head">
        <h1>企业信息管理系统</h1>
    </div>
    <div class="content">
        <div class="left">
            <ul>
                <li><a href="javascript:void(0);" url="region/regionPart.jsp">区域信息管理</a></li>
                <li><a href="javascript:void(0);" url="depart/departPart.html">部门信息管理</a></li>
                <li><a href="javascript:void(0);" url="emp/empPart">员工信息管理</a></li>
            </ul>
        </div>
        <div class="rigth">
        </div>
    </div>
    <div style="clear: both;"></div>
    <div class="footer">
        本系统最终解释权为briup所有。
    </div>
</div>
<p>如果你点我，我就会消失。asf</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script >
    $(function(){
        $("div.left a").click(function(){
            //$("div.rigth").load($(this).attr("url"),{"name":"zhangsan"});
            url = $(this).attr("url");
            $.get(url,function(data){
                $("div.rigth").html(data);
            });
        });
    });
</script>
<script>
    $(document).ready(function(){
        $("p").click(function(){
            $(this).hide();
        });
    });
</script>
</html>

秦丨竹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuary 局部加载jsp

今天遇到一个问题：需要用到JQuary局部加载只要换一下之间的数据即可在一个完整的jsp页面里，拿走公共的数据部分<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script><script > $(function(){ $("div.left a").click(function(){ //$("div.rigth").
复制链接

扫一扫

专栏目录