如何将javascript var传递到ajax remoteFunction中？

Question

我认为生病的人有3个div：

第1分部：带有复选框的品牌列表。 第2分部：带有复选框的类别列表。

第3分部：项目清单。

最后一个div将根据前两个div中选择的内容刷新所有项目。 首先，它显示了所有项目，在我们选择了某些品牌和/或类别并按“刷新”之后，我要刷新div 3。

在Javascript中，我可以获得所选的类别/品牌，而我最大的疑问是如何刷新最后一个格...

这是我正在尝试的：

function refresh() {
var brands= /*<code where i get all the brands selected (this will be a js array)>*/
var categories = /*<code where i get all the categories selected (this will be a js array)>*/
<?php echo $ajax->remoteFunction(array('url' => array('controller' => 'items', 
                                                      'action' => 'men', brands, categories),
                                                      'update' => 'itemsContent')); ?>
}

我的问题是：-如何将js vars传递给php方法？ -如何在cakephp操作中接收一个js数组？ 因为品牌和类别将用于过滤产生div 3结果的查询...

Answer 1

您将无法在这里使用$ajax帮助程序，因为它仅输出静态脚本，该脚本无法在浏览器的“运行时”中更改/影响。 并不是因为它比它复杂。

因此，您将必须使用自己的JS，但这不应该那么难。 所有你需要的是：

1. 一个Cake动作，根据收到的数据输出一个项目列表（不难）
2. 一点JS指出选择了哪些品牌和类别（您已经拥有）
3. 另一部分JS将数据打包并发送到Cake动作
4. 另一部分JS使用您收到的项目列表更新网站

我将看一下jQuery的AJAX函数，以实现＃3。 如果以这种格式发布数据，则可以在Cake的$this->data中轻松访问它：

{
    'data[ModelName][categories]' : categories,
    'data[ModelName][brands]'     : brands
}

关于您的问题：

“如何将js变量传递给php方法？”

你不知道 PHP在服务器上运行，并且Javascript在浏览器中运行时已完成。 JS和PHP之间的唯一“通信”是通过标准HTTP GET和POST请求进行的，该请求是否来自标准浏览器，JS或Flash或其他任何东西都没有关系。

$ajax帮助器只有一堆预制的Javascript代码片段可以放入您的页面，但是您的JS将无法以任何方式与$ajax帮助器“对话”。

Answer 2

我有一个与您相似的方案，并且在Javascript帮助器上找到了一些适用的方法。 我使用了codeBlock()来包装大量的javascript，并使用event()来连接click事件，但是我不确定这比编写原始Javascript更加清晰。

我发现CakePHP手册的AJAX部分确实对基本设置很有帮助。 然后，我将生成的Javascript转换为动态脚本。

在此示例中，每当用户单击链接时，我都会调用add_topic操作。 每次调用它时，我都会递增topicIndex变量，并将其作为参数传递给AJAX调用。 AJAX调用返回用户单击链接上方表格中插入的几行。

        <tr id="add_topic_row"><td colspan="3">
            <a id="add_topic_link" href="javascript:void(0);">New Topic 
                <?php echo $html->image('icons/add32.png');?></a></td></tr>
        </table>
    </fieldset>
<?php 
    echo $form->end('Submit');
    $addTopicUrl = $html->url(array('action' => 'add_topic')) . '/';
    $script = <<<EOS
var topicIndex = $index;
var addTopicUrl = '$addTopicUrl';
addTopic = function()
{
    new Ajax.Updater(
        'add_topic_row', 
        addTopicUrl + topicIndex, 
        {
            asynchronous:true, 
            evalScripts:true, 
            insertion:Insertion.Before, 
            requestHeaders:['X-Update', 'add_topic']
        });
    topicIndex++; 
}
EOS;
    echo $javascript->codeBlock($script);
    echo $javascript->event('add_topic_link', 'click', 'addTopic();')
?>