从ajax调用服务器接收HTML并使用该HTML加载页面

问题描述：

我正在致力于CodeIgniter和AJAX。我想要做的是我有一个包含员工列表的数据表。点击按钮后，我得到雇员的ID并将其发送给我的控制器，在该控制器中，我从该特定员工的数据库中获取所有必要的详细信息。我已经这样做了。我面临的问题是，如何在使用特定的员工详细信息成功调用ajax后，如何重定向到viewEmployeeProfile页面。从ajax调用服务器接收HTML并使用该HTML加载页面

这里是我的代码：

$('#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);给我的HTML viewEmployeeProfile view 我也试图从$ data数组中回显内容，如print_r($employeeBasicDetails);，它给了我正确的信息。但我不知道如何加载从Ajax调用收到的HTML视图？

任何想法如何做到这一点，或者是否有任何这种解决方案的好处，可能是我这样做都是错误的。任何在这个输入将不胜感激。谢谢。

必须对每个字段进行数据库调用*看起来非常浪费和低效。为什么你不能一次获取记录并提取你感兴趣的领域？我敢打赌，这是编写一个自制ORM的结果，但不知道它们应该如何运作。看看[Doctrine]（http://www.doctrine-project.org/），[Propel]（http://propelorm.org/）和[Eloquent]（https://laravel.com/docs/） 5.3 /雄辩）在重新发明车轮之前。 – tadman

使用适当的ORM应该像1一样简单。获取记录。 2.将字段转储为JSON。 – tadman

@tadman感谢你的好主意，但我稍后会关注它。你的回答不是我在问题 –

答

ajax调用的这一行指定了从服务器返回的数据类型。如果你是输出HTML，你需要改变它你目前正告诉Ajax请求期待JSON回报

dataType: "json"

，将其插入到你的页面，你只需要指定你想要它。创建一个空的span/div然后给它一个id，然后在你的成功回调中，你可以将返回的数据插入到页面上的那个元素中。假设你的div id是员工，那么你在成功回调中添加以下内容：

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

从ajax调用服务器接收HTML并使用该HTML加载页面

相关推荐