在ajax調用中從服務器接收HTML並使用該HTML加載頁面

Question

我正在研究CodeIgniter和AJAX 。 我要做什么，我有一個包含員工列表的數據表。 在按鈕上單擊，我獲取員工的ID ，然后將其發送到我的控制器，在控制器中，我從該特定員工的DB獲取所有必要的詳細信息。 我已經做到了。 我面臨的問題是，在使用該特定的“員工詳細信息”成功進行ajax調用后，如何重定向到viewEmployeeProfile頁面。

這是我的代碼：

JS

$('#viewAllEmployeeTable tbody').on('click', '.viewEmployeeDetail', function() {
    var data = viewAllEmployeeTable.row($(this).parents('tr')).data();
    employeeID = data.employeeID;
    $.ajax({
        url: "/ackamarackus/employee/viewEmployeeProfile",
        type: "POST",
        data: {
            "employeeID": employeeID
        },
        dataType: "json",
        success: function(data) {
            console.log(data);
        },
        error: function(error) {
            //console.log(error);
        }
    });
});

viewEmployeeProfile函數

public function viewEmployeeProfile() {
    $employeeID =  $this->input->post('employeeID');
    $data['employeeBasicDetails'] = $this -> getemployeeBasicDetailsFromDatabase($employeeID);
    $data['employeeDepartmentalDeails'] = $this -> getemployeeDepartmentalDeailsFromDatabase($employeeID);
    $data['employeeSalaryDetails'] = $this -> getemployeeSalaryDetailsFromDatabase($employeeID);
    $data['employeeEducationDetails'] = $this -> getemployeeEducationDetailsFromDatabase($employeeID);
    $data['employeeJobHistoryDetails'] = $this -> getemployeeJobHistoryDetailsFromDatabase($employeeID);
    $data['employeeTrainingDetails'] = $this -> getemployeeTrainingDetailsFromDatabase($employeeID);
    $data['header'] = 'template/header';
    $data['sidebar'] = 'template/sidebar';
    $data['main_content'] = 'viewEmployeeProfile';
    $data['footer'] = 'template/footer';

    echo $this -> load -> view('template/template', $data, TRUE);
}

模板/模板視圖

//This view is generic and implements templating 
$this->load->view($header);
$this->load->view($sidebar);
$this->load->view($main_content);
$this->load->view($footer);

在請求console.log(data) ； 給了我viewEmployeeProfile view的HTML，我也試圖從$ data數組中回顯內容，例如print_r($employeeBasicDetails); 它給了我正確的信息。 但是我不知道如何使用從ajax調用接收的HTML加載該視圖？

任何想法如何做到這一點，或者此解決方案有什么好的技巧，可能是我做錯了。 對此的任何投入將不勝感激。 謝謝。

Answer 1

ajax調用的這一行指定了從服務器返回的期望數據類型。 如果您正在輸出HTML，則需要更改它，因為當前您正在告訴ajax請求期望json作為回報

dataType: "json"

要將其插入頁面，只需指定所需位置即可。 創建一個空的span / div並為其指定一個ID，然后在成功回調中，您可以將返回的數據插入頁面上的該元素。 假設您的div ID是雇員，然后將以下內容添加到成功回調中：

$('#employee').html(data);