最近开发网站,需要实现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)选择器
以上!