如何將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();')
?>