ajax局部刷新html页面,Ajax实现页面局部刷新

最近开发网站，需要实现Ajax实现页面局部刷新，花了2天时间搞定，做个记录

开发环境

WAMP集成开发环境，也就是本地服务器

参考资料：

油管教学视频简单的例子，可能利用的是bootstap提供的一些功能实现的，没有用到Ajax。

2.雪霖冰的博客自己敲的代码在我的github中的Ajax实现页面局部刷新-异步中的标准页面刷新。

3.Ajax全接触视频通俗易懂，从原理到实现都很非常清楚，完全使用ajax来实现表达填写的实时监测反馈。

关键代码内容：

Ajax代码

$(document).ready(function(){

// 初次进入网站时的默认页面载入

window.οnlοad=ajaxLoad("home.html","myCnt");

});

function ajaxLoad(myUl,myID)

{

var request = new XMLHttpRequest();

request.open("GET", myUl);

request.send();

request.onreadystatechange = function(){

if (request.readyState === 4 && request.status===200) {

document.getElementById(myID).innerHTML=request.responseText;

}

// Ajax实现右边内容的载入，myUl是右边内容页面载入的链接地址；myID是载入后的内容需要添加到的html的位置对应的id(在标签section里)

调用

Upload
Quality Assessment
DEG Analysis

刷新的内容放置的区域

//这里必须要用id，来匹配document.getElementById(myID)选择器

以上！

ajax局部刷新html页面,Ajax实现页面局部刷新相关推荐

前端局部自动刷新_jQuery实现AJAX定时刷新局部页面实例
方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局 ...
vue第二次ajax失效,解决VUE-Router 同一页面第二次进入不刷新的问题
最近正好遇到一个问题,修改用户的头像,修改后再进入用户主页,发现改了之后即使数据变了..页面也不会重新渲染... 下面提供几种解决方案来给予大家参考: 1. 可以在刷新的页面定义一个参数, 这样每次都 ...
ajax怎么找回地址栏,使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL...
HTML5里引用了新的API,就是history.pushState和history.replaceState,就是通过这个接口做到无刷新改变页面URL的. 与传统的AJAX的区别传统的ajax有如 ...
ajax刷新功能,关于ajax的页面刷新问题
今天调查了一个gridview的行刷新的问题. 使用了ajax进行行的移动操作,当然使用的是jquery的tablepnp插件,还有一个功能就是层级折叠问题,这个使用的viewstate保存的,于是出 ...
js 单页面ajax缓存策略,浅谈ajax的缓存机制---IE浏览器方面
这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中给大家提到了Ajax解决浏览器的缓存问题,解决方法有很多种.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. IE浏览器对于同一 ...
JQ+ajax 提交表单不跳转页面
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 代码 <div class="apply_box"><h1>合作申 ...
session会话拦截ajax,session过期，拦截ajax请求并跳转登录页面
1.方法一 :1.1使用filter 和ajaxsetup 对ajax进行拦截并跳转登录页面 public void doFilter(ServletRequest request, ServletR ...
html页面ajax提交数据,ajax请求提交form表单
AJAX表单提交以及数据接收方式一手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务 ...
vue ajax传输数组,ajax请求回数组数据，Vue页面数组没同步问题
记录bug 为什么 ajax 获取到了 vm.$data.list 页面上却没有显示出来的? 代码 //页面 {{ *** }} //请求数据 send: function(){ var that = ...

ajax局部刷新html页面,Ajax实现页面局部刷新

ajax局部刷新html页面,Ajax实现页面局部刷新相关推荐

最新文章

热门文章