这样,您就可以创建通过AJAX加载的页面框元素,并且可以在不重新加载整个页面的情况下立即刷新页面框元素。 它结合使用jQuery和JavaScript代码。 有点像facebook内容框加载程序,但我自己从头开始编写了代码。
使用这种AJAX方法的优点
- 页面加载速度更快,因为它在DOM准备就绪后会加载内容框
- 可以重新加载框中的内容,而无需重新加载整个页面
- 所有网站都在朝着这一目标迈进,例如Facebook,Twitter,odesk等…
- 可以添加新框,而无需任何其他CSS或JavaScript编码
怎么运行的
- 网页加载后,jQuery为每个要加载的框调用AJAX函数
- 显示一条加载消息
- 服务器端脚本(例如PHP)文件返回该框的HTML
- 内容被加载到网页上的框中
- 当用户将鼠标悬停在该框上时,将很容易地重新加载内容,刷新图像将出现,并且一旦单击该内容将刷新
动态如何?
每个框都是一个div,其中包含一个ID属性,该属性唯一地标识该框。 该div中的每个元素均以该div的ID命名。 jQuery拾取此ID并使用它与服务器端脚本(例如PHP)匹配,并与该框的ID匹配并被加载。 由于所有变量都是基于框的ID创建的,因此它具有动态性。
jQuery代码
在加载网页后加载此功能,并初始化使用附加事件框。
jQuery(document).ready(function($) {
//event to show the box controls when the mouse hovers the box
//applies to all elements with class="box"
$('.box').mouseover(function(){
//replace string "box" with "controls"
var dyn_var = "#" + this.id.replace("box","controls");
$(dyn_var).show();
});
//initialize box controls
$('.box .controls').hide(); //hide all box controls
//hide box when mouse exits box
$('.box').mouseout(function(){
$('.box .controls').hide();
});
//load box content (loads after page loads)
loadboxcontent('box-id1');
loadboxcontent('box-id2');
//etc...
});
此函数获取div的ID,然后使用id = box_id参数将内容加载到子div中。 它可以动态地创建js变量来拾取对象,因此可以应用于任何box控件。
div容器ID = box_id
PHP脚本名称= box_id.php
function loadboxcontent(box_id){ //perform an initial check to see if box_id has been supplied if (box_id == '') { return false; } //show loading image var loading_image="/images/loader.gif"; //Full URL to "loading" image. var loading_text = '
'; var script_path = "../php/"; //path to server side script var box_container = document.getElementById(box_id); box_container.innerHTML = loading_text; //record the result of the AJAX request //(async = false) they load in order and wait until the previous is finished //(async = true) they all load at the same time var result = false; $.ajax({ url: script_path+box_id+".php", type: 'POST', async: true, data: {blogs: 30}, success: function(data) { result = true; document.getElementById(box_id).innerHTML = data; } }); if (result == false) { document.getElementById(box_id).innerHTML = '
Loading '+box_id.replace(/-/g," ")+'...
Could not refesh data, try refreshing the page
'; } else { alert("Content refreshed successfully!"); } }
HTML代码
箱名
![]()
New Blogs
CSS代码
.box { text-align:left; min-height:50px; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; border:1px #FFFFFF groove; }
.box:hover { background-color:#F2F2F2; border:1px #E4DFF4 groove; }
.box h2 { margin:0; padding:5px 0px 5px 10px; background-color:#8973C8; color:white; text-shadow:1px 1px 1px #A999D7; }
.box h2 a img { vertical-align:middle; }
/* BOX CONTROLS */
.box .controls { float:right; position:relative; top:5px; right:5px; }
.box .controls a { opacity:0.8; }
.box .controls a:hover { opacity:1.0; }
图片
- Loader.gif
- Refresh.png
From: https://www.sitepoint.com/load-box-content-dynamically-ajax/