TP5實現Ajax獲取頁面並渲染

摘要： 利用Thinkphp 5 的MVC模式很容易實現HTML頁面的模組分割，利用Ajax技術就可以實現部分頁面的非同步重新整理，從而實現Web級APP——主頁面的框架、CSS樣式、Javascript檔案等只載入一次；根據使用者的實際需求隨時載入所需檔案到本地——比如Body頁面中的 <s...

利用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();
}
}