Question

我想在CodeIgniter中使用AJAX在另一个视图中加载视图。我已经在视图中编写了这段代码。

<button class="btn btn-primary shadow" id='add_items'>Add Items</button>
<div class="row-fluid sortable shadow">     
  <div id="#show"></div>
</div>

$('#add_items').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: "<?=base_url();?>Items/add_items",
    type: 'get',
    dataType: 'html',
    success: function(output) {
      $('#show').html(output);
    }
  });
});

这是我要从中加载<div id="show">

中的视图的控制器

public function add_items()
{
    $this->show('admin/Items/index');
}

Answer 1

我认为我的代码示例具有ur Object Oriented Programming技能可以帮助您。

只需创建一个xml文件即可，其中包含您需要的几种视图，并通过一个unic id对每个视图进行分类。

这是我的xml文件保存在路径中的一部分：

{项目文件夹} /src/CentralAppView.xml

 <?xml version="1.0" encoding="UTF-8"?>
<root>
<view id="adduser"><!-- choose ur id as libel of ur view must be unic  -->
           <!-- u can edit/insert everything u need here -->
           <fieldset>
               <form ...>
                  ....... Content View ....
                </form>
          </fieldset>
      </view>
 </root>`

现在

1）您必须创建一个名为例如“ xmlserver”的XMLHttpRequest实例，例如：

var xmlserver = new XMLHttpRequest();

2）当您创建此Object实例时，您必须为其定义抽象方法：

onreadystatechange

因为您需要为获取的每个服务器状态进行控制，因此，此时，您需要检查您是否获得了使用两个XMLHttpRequest对象属性对文本响应进行特征化所需的响应，正在每个服务器上更改值状态改变：

xmlserver.status和xmlserver.readyState（如果您有很多疑问，可以通过'this'更改'xmlserver'）。

好，现在，您必须知道哪些值可以具有属性，什么是最佳服务器状态，使您准备好通过服务器响应来做所需的事情。

选项以属性“ status”开头：

status是一个整数属性，具有从服务器突出显示的值指示服务器响应标签，可能会输入一个与您的服务器行为和功能相对应的间隔，对于您使用的服务器，可能为100 .. 600，每个值都有一个指标。

我们有一个非常知名的价值示例：

在此服务器上找不到404请求，因此，“在此服务器上未找到请求”是与属性“状态”的值404相符的指示符/含义。

200是成功访问和响应的指标/含义。

现在，让我们转到readyState属性：

readyState也是一个整数属性，它只有从ur服务器获得的ur状态计数，他的间隔固定在0..4，0、1、2、3之间，这意味着无法访问ur服务器和值4符合访问连接。

我认为这也与服务器连接ping计数有关。

现在，如果您有200个状态值和4个readystates，则您将能够执行特征并使用服务器文本响应进行视图插入，因为这是用于所有服务器的唯一响应格式（可能）。

查看代码，我想您会了解更多：

     xmlserver.onreadystatechange = function() {
        if (this.status == 200 && this.readyState == 4) {
            // do ur response traitment and ur view insert here
        }
    }

此后，只需使用XMLHttpRequest对象实例方法“ Open”并传递以下args，就可以指定要从哪个文件或哪个php页面从视图加载：

我们的发送模式：Get / POST，get用于从中获取数据，post用于发送文本数据，作为send方法的一部分，我们将在后面讨论。

。

ur文件/内容路径：在您的情况下，它必须是{project folder} /src/CentralAppView.xml或您使用的相同路径。

注意：路径错误或服务器关闭状态可能会返回我们之前讨论过的不需要的值。

和

您的同步级别：是/否。

代码将为：

xmlserver.open("GET", "./src/Containts_Dialogs.xml", true);

最终在Ajax部分

调用send方法以开始服务器与浏览器之间的事务，以从服务器获取您的需求视图。

xmlserver.send(); // arg is undefined because we used the GET sending mode in the open methode

最后使用DOM将ur视图插入ur Div元素

使用预定义的XMLDocument Object实例，他的getElementById（）方法和innerHtml属性。

从XMLDocument获取具有ID“ show”的DOM元素对象实例称为document，并在新变量中对其产生影响称为viewelm。
通过新的Content ajax响应更新视图。

现在，我们只返回到ower'onreadystatechange'，并将此特征插入我为您创建的注释中，以获取代码：

    var xmlserver = new XMLHttpRequest();
    xmlserver.onreadystatechange = function() {
        if (this.status == 200 && this.readyState == 4) {
            document.getElementById("show").innerHtml = xmlserver.responseText;
        }
    }
    xmlserver.open("GET", "./src/Containts_Dialogs.xml", true)
    xmlserver.send();

警告：从您的html div id属性元素中删除＃，以正确运行代码。 。

好的编程助手：）。

Answer 2

在控制器中，将要加载的视图页面的html字符串加载为：

$output = array(
  'result' => $this->load->view('admin/Items/index','',true)
);

您将输出发送为对ajax请求的响应：

print(json_encode($output));

您将收到响应客户端，如：

success: function(output) {
  $('#show').html(output.result);
}

@Danish发表评论后，我意识到ajax期望响应为HTML，在此实现中，服务器以json数据响应。

要使用此解决方案，您需要将ajax调用的响应类型更改为Json。

 $('#add_items').on('click', function(e) {
  e.preventDefault();
  $.ajax({
    url: "<?=base_url();?>Items/add_items",
    type: 'get',
    dataType: 'JSON',
    success: function(output) {
      $('#show').html(output.result);
    }
  });
});

希望如此。

如何在Codeigniter中使用Ajax在div内加载视图

2 个答案: