使用 javascript 函数加载视图答案

【问题标题】：Using javascript function to load a view使用 javascript 函数加载视图
【发布时间】：2015-07-12 13:20:38
【问题描述】：

我试图通过 JavaScript 使用 this.id 将视图加载到我的 div #teste 中，但没有成功。我的函数出了什么问题？

下面的JavaScript函数

<script type="text/javascript">

var baseurl = '<?php site_url(); ?>'; //raiz do website

function navbutton(id) {

    $.ajax({
        type: 'GET',
        url: baseurl+'main/'+id,
        dataType: 'html',
        success: function(html) {
            $('#teste').html(html);
        }
    });
    }

HTML 按钮

<li><a href="javascript:void(0)" id="contato" onclick="navbutton(this.id)">Contato</a></li>

我的主控制器（一个调用所有其他视图的函数）

class Main extends CI_Controller {

var $_data = array();

public function index()
{
    if (!$this->uri->segment(1) && !$this->uri->segment(2)) {
        $view = 'inicio';
    }
    if ($this->uri->segment(1) && !$this->uri->segment(2)) {
        $view = $this->uri->segment(1, 'inicio');
    }
    if ($this->uri->segment(1) && $this->uri->segment(2)) {
        $view = $this->uri->segment(1, 'inicio') . '/' . $this->uri->segment(2, '');
    }
    if (!file_exists(APPPATH . 'views/' . $view . EXT)) {
        $view = "404";
        header("HTTP/1.0 404 Not Found");
    }

    $this->load->view('templates/header');
    $this->load->view($view, $this->_data);
    $this->load->view('templates/footer');

}

【问题讨论】：

您能解释一下哪里有错误吗？或者实际发生了什么？请获取更多详细信息以提供您需要的答案
ajax base url 和浏览器一样吗？因为 javascript 有“同源策略”
我建议添加 error:function(v1,v2,v3){ alert('Something went wrong'); } 在 ajax 上，成功后： { ....} 捕获一些响应错误
我总是得到 'Uncaught ReferenceError: navbutton is not defined' 即使使用 $(document).ready(function()
看看我上次编辑的答案。如果您已经解决了，请在此处添加您的解决方案。

标签： javascript jquery codeigniter model-view-controller controller

【解决方案1】：

避免出现“未捕获的 ReferenceError: navbutton is not defined”错误用javascript附加点击事件函数：

var baseurl = '<?php site_url(); ?>'; //raiz do website
function navbutton(id) {
    $.ajax({
        type: 'GET',
        url: baseurl+'main/'+id,
        dataType: 'html',
        success: function(html) {
            $('#teste').html(html);
        },
        error:function(v1,v2,v3){
            alert('Something went wrong'); }
    });
}

$("#contato").on('click',function(event){
    event.preventDefault();
    navbutton(this.id);
});

在 HTML 上使用

<li><a href="#" id="contato">Contato</a></li>

JSFIDLE test - 在此示例中，ajax 请求将收到错误 404，因为 url 未正确定义，但您的代码必须有效。

提示为了确保所有代码都在正确的位置，在浏览器中加载后查看页面的源代码（CTRL+U）

【讨论】：

在我的控制台上还是报错Uncaught ReferenceError: navbutton is not defined
在html onclick中使用前添加navbutton的声明
该示例工作正常，即使在我的按钮之前声明了 codeigniter -函数，但更正不适用于完整代码。我认为 ajax 指令有问题，但不知道是什么。

【解决方案2】：

您是否尝试将字符串加载到元素？在这种情况下，您需要在加载视图方法时传递第三个参数 TRUE。

$view = $this->load->view('templates/header', '', TRUE);
$view .= $this->load->view($view, $this->_data, TRUE);
$view .= $this->load->view('templates/footer', '', TRUE);
echo $view;

签入docs here。

【讨论】：

我试图渲染/加载部分视图。使用 javascript 加载页面而不在 codeigniter 上刷新。
我刚刚指出了如何使字符串不加载页面。如果您使用 ajax 来获取该字符串，虽然您需要为特定页面发布标识符，但它可以工作。