javaweb实现不刷新网页更改页面内容

最开始学习html的时候，菜单的点击都是直接跳转走的，但是接触了某些框架，或是看到写的很漂亮的网页时，发现它们可以只改变局部的内容，ajax是可以实现的，从后台获取数据，传到前台，然后前台处理。但是如果局部刷新很大片地方，后台或前台不是要写很多代码？

以前写代码的时候，发现如果是ajax请求的话，后台的转发和重定向是不会跳转的。但是也没有过多的关注。今天看了一下ajax的返回值，才发现远程加载页面是这样实现的。

前台处理的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body><div id="main" style="height:600px;width:100%;"></div>
</body>
<script>$(function(){$.ajax({ url : 'getPage', success : function(data){console.log(data);$("#main").html(data);}});});
</script>
</html>

加载的页面如下：

<div>这是一个新网页</div>
<p style="color:red;">测试文本</p>
<p style="color:blur;">测试文本</p>
<p style="color:green;">测试文本</p>
<ul>
<li style="color:red;">123</li>
<li style="color:red;">321</li>
</ul>

后台只要把请求转发到要加载的页面就可以了；

前台得到的值是：

javaweb实现不刷新网页更改页面内容相关推荐

webpack5.0使用webpack-dev-server时，无法自动刷新网页html页面解决方案
有讲target:'web'的有讲添加inline属性的(但是会显示如下错误) [webpack-cli] Error: Unknown option '–inline' 其实主要还是webpack ...
如何修改网页的页面内容
1.火狐浏览器任意页面按F12键 2.点击控制台 3.输入 document.body.contentEditable='true' 效果如图:
使用Blazor和SqlTableDependency进行实时HTML页面内容更新
目录介绍背景使用代码下载源1.3 MB 介绍在这个简单的示例中,我们将看到发生在SQL Server数据库表更改时如何更新HTML页面,而无需重新加载页面或从客户端到服务器进行异步调用,而是 ...
0基础 | BeautifulSoup进行页面内容提取
事情是这样的,本人本科跨专业考到某大学研究生,然后现在每天0基础做作业,每次百度出来的方法都不是对小白特别友好,因此想到在此处记录一下我的0基础作业. 今天做的是网络爬虫课的作业,使用Beautifu ...
Php无刷新修改url,history 实现无刷新更改url和页面内容
在访问google plus 和网易m站时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强 ...
用函数刷新页面内容比刷新页面要好
用函数刷新页面内容比刷新页面要好 app中有时需要更新页面的内容,这个时候可以选择刷新该页面但如果使用函数来更改页面的内容,效果会更好: 例如转载于:https://www.cnblogs.com ...
点击按钮刷新_Chrome扩展推荐：抢票太累？后台监视网页，页面自动刷新和提醒...
出于某种原因,在使用浏览器时我们可能需要每隔一段时间刷新一下网页. 例如,在监视阅读量和评论,抢购新产品.演唱会门票.火车票,关注的作者更新文章,网站服务突然中断这些场景中,如果都采用手动刷新,那是相 ...
几组超神奇的网页应用代码要你在IE浏览器任意打开一个网站，然后在浏览器上输入如下代码神奇的代码，可随意修改复制页面内容！
只要你在IE浏览器任意打开一个网站,然后在浏览器上输入如下代码神奇的代码,可随意修改复制页面内容! 神奇的代码 1 javascript:R=0; x1=.1; y1=.05; x2=.25; y2= ...
使用nginx代理网页，修改页面更新后，页面内容不变。停止nginx后，发现页面仍然可以访问。
我把一个页面的内容改变后,刷新页面,发现页面内容不变,我刚开始猜测是因为:页面已经在浏览器中缓存了,所以访问的页面仍然是以前的页面. 我通过以下方法直接清除浏览器缓存,却发现页面仍然是以前的内 ...
LayUi前端框架删除数据缓存问题（解决删除后刷新页面内容又会显示问题）
LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) 参考文章: (1)LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) (2)https://www.cn ...

javaweb实现不刷新网页更改页面内容

javaweb实现不刷新网页更改页面内容相关推荐

最新文章

热门文章