TP5实现Ajax获取页面并渲染

利用Thinkphp 5 的MVC模式很容易实现HTML页面的模块分割，利用Ajax技术就可以实现部分页面的异步刷新，从而实现Web级APP——主页面的框架、CSS样式、Javascript文件等只载入一次；根据用户的实际需求随时载入所需文件到本地——比如Body页面中的<section id="content"></section>中。

但是通过Ajax获取的页面通过操作DOM更新到页面时，加载部分的页面无任何CSS样式，通过百度搜索了很长时间，虽然方法很多，但是都无法解决！

最后终于找到了根源：通过jQuery的.html()很难解决，但通过Javascript的innerHTML操作DOM无需任何操作即可渲染页面！

document.getElementById(location).innerHTML = data; // 必须使用原生的innerHTML

---

整个Thinkphp 5.1下实现Ajax异步刷新页面并渲染是需要两步即可：

第一步：创建Javascript函数便于重复利用

/**
 * 动态加载页面并渲染
 * @param  {文本} url      请求的地址 "{:url('admin/Leave/history2')}"
 * @param  {文本} location 需要加载页面的位置id值（如<section id="content">）
 * -----------------------------------------------------------------------------
 * 注意：
 *     1. Html页面A标签的onclick必须采用以下格式：
 *        onclick='loadAjaxHTML("{:url('admin/Leave/history2')}","content");'
 *     2. 思路：直接利用MVC的View部分——Thinkphp5的 return $this->fetch()取回页面
 *        好处是中间可以用任意的对页面进行赋值和分配，在后端不需要任何的修改
 *     3. 意味着通过TP5实现Ajax动态加载页面做到不刷新的APP级别Web应用的可实现性！
 * -----------------------------------------------------------------------------
 */
function loadAjaxHTML(url,location){
    //设置默认参数
    var location = arguments[1] ? arguments[1] : 'content';     // 加载位置id
    // 采用JQuery的Get方法得到页面
    $.get(url, function(data) {
        // 必须使用原生的innerHTML才能不丢失CSS样式
        document.getElementById(location).innerHTML = data;
        // showMsg("页面加载完毕");
    });
}

第二步：前端代码修改href="#"值后添加onclick事件

<a href="#" onclick='loadAjaxHTML("{:url('admin/Leave/index')}");'>事假</a>

---

后端的PHP代码无需做出任何修改，在控制器中查询数据并分配到页面中，然后一起发送到页面！

<?php
namespace app\admin\controller;
use app\admin\model\Leave as LeaveModel;
use think\Controller;
use think\Db;
use think\facade\Request;

class Leave extends Valid {
    //输出页面
    public function index() {
        // 查询数据
        $list = LeaveModel::where(['status' => [1, 2]])->all();
        $this->assign('list', $list);
        //输出页面
        return $this->fetch();
    }
}

TP5实现Ajax获取页面并渲染