使用AJAX动态加载盒内容

>本教程演示了创建通过Ajax加载的动态页面框，从而可以即时刷新而无需全页重新加载。 它利用jQuery和JavaScript。将其视为自定义Facebook风格的内容框加载程序。

密钥概念：

• ajax和jQuery在没有完整页面重新加载的情况下动态加载和刷新页面框，镜像Facebook和Twitter等网站的功能。
>
• 该过程涉及在DOM准备就绪后加载框，使用每个框的AJAX函数，显示加载消息，并使用服务器端脚本（例如PHP）返回每个框的HTML。然后将此HTML插入网页上的相应框中。>
>系统的动力学源于使用每个框的
• 属性生成变量，然后将其与服务器端脚本匹配。 内容很容易重新加载，并且可以在没有额外CSS或JavaScript的情况下添加新盒子。id>
这种AJAX方法的优点

：

由于DOM准备就绪后，由于内容框加载而引起的更快的页面加载时间。>
• 内容刷新在没有完整页面重新加载的框中。
>
• 与主要平台（Facebook，Twitter等）使用的现代网络开发实践保持一致。
>
• 添加新框不需要其他CSS或JavaScript代码。
• 它的工作方式：

页面加载后，jQuery调用每个框的ajax函数。> 显示加载消息。

>服务器端脚本（例如，PHP）返回框的HTML。

内容已加载到框中。
1. >内容可以通过悬停在盒子上揭示刷新图像来轻松重新加载；单击此图像会触发内容刷新。
3. 动态功能：
每个盒子都是
5. ，带有唯一的中的元素使用相同的

。 jQuery使用此

与服务器端脚本匹配，使系统动态化，因为所有变量都是基于盒子的。

jQuery代码：

<div> <code>id此代码在页面加载后运行，初始化框控件和附加事件。> <div> <code>id此功能基于提供的id>将内容加载到子id中。 它动态创建变量来处理对象。 用于识别容器

和相应的PHP脚本（例如，）。

> html代码（示例）：

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

<div>> css代码：<ancim> <code>box_id

jQuery(document).ready(function($) {
    $('.box').mouseover(function(){
        var dyn_var = "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" + this.id.replace("box","controls");
        $(dyn_var).show();
    });

    $('.box .controls').hide();

    $('.box').mouseout(function(){
        $('.box .controls').hide();
    });

    loadboxcontent('box-id1');
    loadboxcontent('box-id2');
    // ...add more box IDs as needed...
});

>图像：

• loader.gif
• refresh.png

（省略了原始输入的FAQ部分，因为它是一般AJAX使用的单独的，无关的部分。）