jquery - CakePHP + ajaxForm - 加载 View 的一部分

Question

我通过 jQuery 插件 AjaxForm 将表单提交到服务器。

这是我的简化 View :

<div id="output1">...here goes my CakePHP PHP form code...</div>

<script type="text/javascript">
    $(document).ready(function() { 
        var options = { 
            target:'#output1',
            beforeSubmit: onBeforeSubmit,
            success: onSuccess,
            error: onError
        }; 
        $('#CommentEditForm').ajaxForm(options); 
    });
</script>    

在我的 Controller 函数中，当我收到未通过模型验证的表单数据时，我会更改 ajax 布局的布局并返回 View ，而无需默认布局的 html 内容，并将其附加到我 View 中的 div#output1 中。

看起来没问题，但现在我可以看到除了表单之外的 div#output1 和 javascript 代码。我知道我的问题出在哪里 - 我需要解决方案如何仅返回表单数据而不是 javascript 代码和 div#output1 内容。此逻辑将在我的所有应用程序中使用，因此我希望避免在我的所有 View 中硬编码 {if...else} 条件。

Answer 1

thaJezath 的回答很好，但还有一些事情:

1. 使用 CakePHP Js 助手来处理所有 ajax 内容会更容易、更干燥:

   <div id="output">
   <?php
       echo $this->Form->create();
       echo $this->Form->input('input1');
       echo $this->Form->input('input2');
       echo $this->Js->submit('submit',array('update' => '#output');
   ?>
   </div>
   

这将自动添加缓冲脚本，该脚本将为您处理 ajax 提交。但你需要echo $this->Js->writeBuffer();布局中 </body> 之前的行标签。但这仍然返回 <div id="output">... - 如果您将更改为 'update' => '#content' ，它将重新加载整个内容 div。

1. 如果您确实需要更新，而不是其他内容:

在您的 View 文件中:

     <div id="output">
     <?php $this->start('ajax-content'); // this line starts new block ?>
     <?php
        echo $this->Form->create();
        echo $this->Form->input('input1');
        echo $this->Form->input('input2');
        echo $this->Js->submit('submit',array('update' => '#output');
    ?>
    <?php
        $this->end(); // this line ends block
        echo $this->fetch('ajax-content'); // this line print contents of block
    ?>
    </div>

在你的/View/Layouts/ajax.ctp中:

    <?php
        // next 2 lines only ensure that ajax-content block exists
        // if not it will be just empty string
        $this->startIfEmpty('ajax-content'); 
        $this->end();
        echo $this->fetch('ajax-content'); // this line outputs ajax-content block (the form)
    ?>

总而言之，此方法将您想要返回的内容包含在 View block 内的 ajax 内容中。然后 ajax 布局而不是打印整个 View ( $this->fetch('content'); )，它只打印 ajax-content block 的内容( $this->fetch('ajax-content'); )。这样您就可以在每个 View 中标记 ajax 请求期间要返回的所有内容。

行:

        $this->end(); // this line ends block
        echo $this->fetch('ajax-content'); // this line print contents of block

可能不太方便 - 将所有 block 记录代码放入您自己的帮助程序中以便简单地使用它是个好主意:

    <div id=...
    $this->AjaxContent->start();
    your form here
    $this->AjaxContent->stop();
    </div>

正如 thaJezath 在评论中所写，JsHelper 将在未来版本中被弃用，因此正如他所说，使用 View block 会更安全。 HtmlHelper 有方便的方法来做到这一点:

    <?php $this->Html->scriptStart(array('inline' => false)); ?>
        $(document).ready(function(){ 
            // your code here
        });
    <?php $this->Html->scriptStart(array('inline' => false)); ?>

这会将您的脚本添加到 viewBlock "script"这是由$this->fetch('script');以默认布局打印的