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:
用 ajax 传递的数据应该用双引号引起来
data: {
name: "search"
},
将 return false;
添加到点击处理程序的末尾,这样您就可以防止提交表单和重新加载页面
另请注意,您必须在 Template/Items/search_data.ctp
中具有搜索数据模板
我正在尝试使用 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:
用 ajax 传递的数据应该用双引号引起来
data: { name: "search" },
将
return false;
添加到点击处理程序的末尾,这样您就可以防止提交表单和重新加载页面
另请注意,您必须在 Template/Items/search_data.ctp