ajax访问后端后把返回的页面渲染到本页面的局部(页面的嵌套)

自己把以前的javaweb项目重新用SSM框架进行整理，遇到一个问题，因为以前的文件我都是放在WEB-INF外面，用Bootstarp的模态框没有问题，现在除了登录其他的都放进了WEB-INF下，这样就显示不了，我知道是放在WEB-INF(保护)下面的原因，我就想不用模态框了，想用异步局部刷新来实现

直接上代码
这是head里的代码

<script type="text/javascript">
	$(document).ready(function(){
				$("#PeopleMesg").click(function(){
					$.ajax({
						url:"./jumpPersonal.action", //后端的url
						type:"POST", 
						dataType:"text",
						success:function(msg){
						//列表数据页面渲染
						$("#courseList").html(msg);
						}
					});
				});
		});
	</script>

下面是body

<div id="courseList"></div>      //简单不

就是把ajax的返回结果msg放在上面这个div里
如果不懂 .html(msg) 可以百度

弄完这个第一步就完成了，但是我渲染的这个页面里有分页的表格，也就是里面有操作，根据操作刷新里面的数据，但是不允许跳出最外面的页面，也就是不能整个页面刷新，还是局部刷新数据，用俗点的话说就是局部页面渲染后局部页面里的数据的刷新，虽然系统学过vue，但是我想用最简单jquery或者js搞定，

现在看局部刷新的那个页面的head

<script type="text/javascript">
	
		$(document).ready(function(){
		//这大家可能与疑问 .pagination a 是什么代表的什么
		//先解释一下这个页面有什么
		//因为分页的导航栏有很多a标签，我向通过点击a标签来获取a标签里的内容
		//为什么不直接href呢？因为这样会让整个页面（父页面）刷新，只剩下当前页面，也可以这么理解，
		//当前页面会把父页面直接覆盖，当前页面会充斥满整个页面
		//在回到原题
		//.pagination a  代表一个标签的calss为pagination 里的所有的a标签
		//.click 点击事件:就会知道点击的那个a标签，通过$(this).text()知道a标签的内容
			$('.pagination a').click(function(){
			
				$.ajax({
						url:"./comingSoonSkip.action?type="+$(this).text(),
						type:"GET",
						dataType:"text",
						success:function(msg){
						//刷新当前页面，因为当前页面也就是最外层的局部页面，当前页面刷新就是外层页面的局部刷新
						$("#cout").html(msg);
						}
					});	
						});
		});
		//首页和末页的没有写上，看懂这个你肯定也会首页和末页的了
		</script>

body部分

<div id="cout">
	<nav aria-label="Page navigation">
	<!--下面标签的class对应上面的-->
	  <ul class="pagination">
	  <!--这是首页导航-->
	    <li>
	      <a href="#" aria-label="Previous" id="First">
	        <span aria-hidden="true">&laquo;</span>
	      </a>
	    </li>
	   <!--这是1-5页的导航-->
	    <c:choose>
	    <!--这个标签是if -else if-else if-else ...-->
	    	<c:when test="判定条件">
	    		<li><a href="#">1</a></li>
	    		<li><a href="#">2</a></li>
	   			<li><a href="#">3</a></li>
	    		<li><a href="#">4</a></li>
	   			<li><a href="#">5</a></li>
	    	</c:when>
	    </c:choose> 	
	      <!--这是末页导航-->
	    <li>
	      <a href="#" aria-label="Next" id ="Last">
	        <span aria-hidden="true">&raquo;</span>
	      </a>
	    </li>
	  </ul>
	</nav>	
</div>

搞定

ajax访问后端后把返回的页面渲染到本页面的局部(页面的嵌套)

猜你喜欢