使用AJAX动态加载盒子内容

这样，您就可以创建通过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 = '
 Loading '+box_id.replace(/-/g," ")+'...
';
	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 = '
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/