AJAX JSON 和 cakephp 中的路由

AJAX JSON and routing in cakephp

我正在尝试使用 AJAX 来实现搜索模块。

我的项目控制器中有一个 index.ctp 文件,我已将我的 index.ctp 项目文件链接到我的 search.ctp 文件,该文件位于页面控制器下,如下所示:

<li><?= $this->Html->link(__('Search Products'),['controller'=>'Pages','action' => 'search']) ?></li>

对于 search.ctp 页,显示的 URL 是: http://onlineelectronic.com/pages/search

在我的search.ctp文件中代码如下:

    <head>
    <title> Search Results</title>
    <?php echo $this->Html->script('//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', array('inline' => false));?>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#Submit1").click(function () {
                $.ajax({
                    type: 'post',
                    url: '/Items/searchData",
                    data: {
                        name: "search"
                    },
                    beforeSend: function(){
                        $("#resultField").html("Loading...");
                    },
                    success: function(response) {
                        jQuery('#resultField').val(response);
                    },
                    error: function(response, error) {
                        alert("Search :Error"+response.error());
                    },
                    dataType: 'json',
                    global: false
                });
               return false;
            });
        });
    </script>
</head>

<div>
    <?= $this->Form->create() ?>
    <fieldset>
        <legend><?= __('Search Item') ?></legend>
        <?php
        echo $this->Form->input('search',['label'=>'Search']);
        ?>
    </fieldset>

    <?= $this->Form->button('Search Items',['label'=>'Submit1']); ?>
    <?= $this->Form->end() ?>

</div>

<div id="resultField">

</div>

在我的 ItemsContoller 页面中,searchData 方法是这样实现的:

    class ItemsController extends AppController
{


    public $helpers = ['Form', 'Html', 'Time'];

    public function initialize()
    {
        parent::initialize();
        $this->loadComponent('RequestHandler');
    }

    public function search(){
    //dummy
    }

    /**
     *obtains search result for a given string.
     */
    public function searchData()
    {
        $this->layout = 'ajax';
        echo "here";
        $search_data=[];
        var_dump($search_data);
        //$search_results = [];
        if ($this->request->is('post')) {
            $search_data= $this->request->data;
            $search_data=implode("|",$search_data);
            $search_results = $this->Items->find('all', array('conditions'=>array('Items.itemName LIKE'=>"%$search_data%")));
            if(!empty($search_results)) {
                $this->set(compact($search_results));
                $this->set('_serialize',array('search_results'));
                return json_encode($search_results);
            }
        }

    }



    public function beforeFilter(Event $event)
    {
        parent::beforeFilter($event);

        $this->Auth->allow(['index', 'view','search','searchData']);


    }
}

我的问题是 SearchData 方法没有被调用,我没有收到任何 javascript 错误 also.How 我是否确保在按下 [=34] 之后调用该方法=] 这是由于 url 在 json?

我看到 2 个可能的问题。首先在 ItemsController 中,你必须允许 searchData 方法

// change this line
$this->Auth->allow(['index', 'view','search']);
// to this
$this->Auth->allow(['index', 'view','searchData']);

还要确保您有正确的 jQuery 选择器

// try to change this line
<?= $this->Form->button('Search Items',['label'=>'Submit1']); ?>
// to this
<?= $this->Form->button('Search Items',['id'=>'Submit1']); ?>

编辑: 更正 javascript:

  1. 用 ajax 传递的数据应该用双引号引起来

    data: {
        name: "search"
    },
    
  2. return false; 添加到点击处理程序的末尾,这样您就可以防止提交表单和重新加载页面

另请注意,您必须在 Template/Items/search_data.ctp

中具有搜索数据模板