AJAX更新div而不创建部分

时间:2018-12-07 18:52:14

标签: ajax octobercms

我有一些页面:

title = "page"
url = "/page"
layout = "default"
==
function onTest()
{
    $this['result'] = 'Test string';
}
==

<!-- AJAX enabled form -->
<form data-request="onTest" data-request-update="mypartial: '#myDiv'"></form>

<!-- Result container -->
<div id="myDiv"></div>

提交表格后,我只能在部分“ mypartial”中获取“ result”变量,其代码为:Here is {{ result }}。并将此代码插入#myDiv。

如何在不创建局部变量的情况下获取“结果”变量?为什么要为每个小的AJAX查询创建.htm文件(部分)?

1 个答案:

答案 0 :(得分:2)

我想您可以轻松地从服务器端更新ID为myDiv的div。

  

您只需要推送具有正确ID #myDiv的标记,它将自动更新Html Element with given ID。 [我们不需要部分补偿,也不需要部分]

title = "page"
url = "/page"
layout = "default"
==
<?php
function onTest()
{
    $result = 'Test string';    
    return ['#myDiv' => 'New Result: ' . $result]; 
}
?>
==
<!-- AJAX enabled form -->
<form data-request="onTest">
    <button type="submit">Submit Fire Ajax</button>
</form>

<!-- Result container -->
<div id="myDiv">old result</div>
  

successful Ajax的{​​{1}}请求标记之后将是

myDiv
  

好消息是,作为October Ajax框架的一部分,您无需编写JavaScript即可更新<div id="myDiv">New Result: Test string</div> ,它会自动搜索myDiv并更新其标记。

当您返回October Cms的Ajax api的数组

#myDiv

在客户端,它将自动搜索ID为return ['#myDiv' => 'Hello']; 的元素,如果找到了该元素,则它将在成功的Ajax请求中使用给定的标记对其进行更新,例如本例中的myDiv

如有疑问,请发表评论。