在CakePHP中使用Ajax搜索数据 [英] Searching data using Ajax in CakePHP
本文介绍了在CakePHP中使用Ajax搜索数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用CakePHP 2.3.6。在我的项目之一，我必须实现搜索 feture，使用AJAX。通常情况下，这是工作，但我想，该页面将不会重装，结果表将立即更新数据。
这是控制器 code：
公共职能searchData（）{
$这个 - ＆GT;集（............）;
$这个 - ＆GT;集（............）;
$这个 - ＆GT;集（............）;
如果（$这个 - ＆GT;请求 - '是（'后'））{
$这个 - ＆GT;布局='阿贾克斯';
$这个 - ＆GT; autoRender = FALSE;
如果（！空（$数据））{
$数据= $这个 - ＆GT;请求 - ＆GT;的数据;
//生成选项
。
。
。
$结果= $这个 - ＆GT; ModelName-＆GT;找到（'所有'，$选择）; //$选择生成选项
如果（！空（$结果））{
$这个 - ＆GT;集（紧凑型（$结果））;
$这个 - ＆GT;设置（'_序列化'，阵列（'结果'））;
的print_r（json_en code（$结果））;
$这个 - ＆GT;会话级＆GT; setFlash（搜索申请成功）;
$这个 - ＆GT;集（'结果'，$结果）;
}其他
$这个 - ＆GT;会话级＆GT; setFlash（没有找到数据）;
}其他
$这个 - ＆GT;会话级＆GT; setFlash（你没有给任何信息，搜索）;
}
}
我的查看文件（search_data.ctp）：
＆LT; H3＆GT;搜索结果＆LT; / H3＆GT;
＆LT; PHP
回声$这个 - ＆GT;形式 - ＆GT;创建（）;
回声$这个 - ＆GT;形式 - ＆GT;输入（'字段1'，阵列（'类型'=＆GT;文本，DIV'=＆GT; FALSE））;
回声$这个 - ＆GT;形式 - ＆GT;输入（场2，阵列（'类型'=＆GT;文本，DIV'=＆GT; FALSE））;
回声$这个 - ＆GT;形式 - ＆GT;输入（'FIELD3'，阵列（'类型'=＆GT;文本，DIV'=＆GT; FALSE））;
回声$这个 - ＆GT;形式 - ＆GT;输入（'FIELD4'，阵列（'类型'=＆GT;文本，DIV'=＆GT; FALSE））;
回声$这个 - ＆GT;形式 - ＆GT;提交（搜索）;
回声$这个 - ＆GT;形式 - ＆GT;结束（）;
＆LT; DIV ID =信息搜索结果＆GT;
＆LT;（！空（$结果））？如果PHP {＆GT;
＆LT;表类=桌桌条纹表边框的表格悬停＆GT;
＆LT; THEAD＆GT;
＆LT;第i个字段1＆LT; /第i个
百分位＆GT;现场2'; /第i个
百分位＆GT;现场第3版/第i个
百分位＆GT;现场4℃/第i个
＆LT; / THEAD＆GT;
＆LT; TBODY＆GT;
＆LT; PHP的foreach（$结果为$申请人）{＆GT？;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT; PHP的echo $结果['MODELNAME'] ['字段1'];？＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; PHP的echo $结果['MODELNAME'] ['域2'];？＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; PHP的echo $结果['MODELNAME'] ['FIELD3'];？＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; PHP的echo $结果['MODELNAME'] ['FIELD4'];？＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; PHP}＆GT？;
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
＆LT; PHP
}其他
回声没有找到数据;
？＆GT;
＆LT; / DIV＆GT;
在这里，我要的是，当我提交表单，在结果 DIV 马上就会出现，结果数据，组织在表中。我想用阿贾克斯在这里，这样用户就会立即得到的结果，它会提高性能和用户体验。
我已经看到了一些YouTube视频，在那里他们加载其他页面的结果，并显示在 DIV （它被称为成功的页面 DIV 的大部分时间:)），使用阿贾克斯。我能行。但是，我只想尽一切1页，我不想用2页做到这一点。
我想这对于Ajax请求并更新我的结果 DIV （在我的 search_data.ctp 文件）
当我运行的页面，这是输出：
[{申请人：{ID：3，名：名称2","email":"ssaha.316@gmail.com","mobile":"9082730572","contact_phone":"3465360980","office_phone":"2437845693","correspondence_address":"Correspondence地址2，permanent_address：永久地址2，preferred_work_areas：字段1，字段2，字段3，创造：2014年5月31日18时22分十七秒，改性：2014年5月31日18:22:17"},"ApplicantAcademicQualification":[{"id":"2","applicant_id":"3","level":"Bachelor(Pass)","degree_title":"B.A.","passing_year":"1999","institution":"Institution 2，结果：4.2，大：孟加拉文学，创造：2014年5月31日18时22分十七秒，修改：2014年5月31日18:22 ：17}]，ApplicantEmploymentHistory：[{ID：2，applicant_id：3，雇主：用人单位2，position_held：位置2，产业： 行业2，部：二部，major_responsibilities：责任2，job_location：本地，key_achievement：成就2，served_from：1999年8月15日，served_till：2010-02-12，创造：2014年5月31日18时22分17秒，修改：2014年5月31日18时22分17秒}]， ApplicantOther：[{ID：2，applicant_id：3，academic_activities：学术活动2，non_academic_activities：非学术活动2，main_reason_for_applying：原因2","worked_before":"0","last_position":"","work_location_constraint":"1","ready_to_join_on":"2008-08-14","expected_salary":"30k+","created":"2014-05-31十八点22分17秒，修改：2014年5月31日18:22:17"}],"ApplicantProfessionalQualification":[{"id":"2","applicant_id":"3","name_of_certificate":"Certificate 2，院：研究院2，距离：2002-10-17，要：2007-10-12，位置：本地插件，创造： 2014年5月31日18时22分十七秒，修改：2014年5月31日18时22分十七秒}]，ApplicantTraining：[{身份证：2，applicant_id： 3，称号：标题2，院：研究院2，training_year：1995年的，位置：在公司，创造：2014年5月31日18 ：22：17，修改：2014年5月31日18时22分17秒}]}，{申请人：{id为：2，名称：名称1","email":"user1@email.com","mobile":"715414918934","contact_phone":"2357295090","office_phone":"083656987398","correspondence_address":"Address 1_1，permanent_address：地址1_2，preferred_work_areas：字段1，字段2，字段3，创造：2014年5月18号十六点48分08秒，修改 ：2014年5月18日17:20:12"},"ApplicantAcademicQualification":[{"id":"1","applicant_id":"2","level":"Secondary","degree_title":"S.S.C","passing_year":"2009","institution":"Institute 1，结果：4，大：科学，创造：2014年5月18日十六时48分08秒，修改：2014年5月18日17:20： 12}]，ApplicantEmploymentHistory：[{ID：1，applicant_id：2，雇主：用人单位1，position_held：位置1，产业：业1，部：部门1，major_responsibilities：职责1，job_location：本地，key_achievement：成就1，served_from：2005年3月12日 served_till：2007-11-26，创造：2014年5月18日16时48分08秒，修改：2014年5月18日17点20分十二秒}]， ApplicantOther：[{ID：1，applicant_id：2，academic_activities：学术活动1，non_academic_activities：非学术活动1，main_reason_for_applying：原因1 worked_before：1，last_position：最后位置1","work_location_constraint":"1","ready_to_join_on":"2008-07-10","expected_salary":"20k-25k","created":"2014-05-18十六点48分08秒，修改：2014年5月18日17:20:12"}],"ApplicantProfessionalQualification":[{"id":"1","applicant_id":"2","name_of_certificate":"Certificate 1，院：研究院1，距离：2011-10-11，要：2012年9月11日，位置：本地插件，创造： 2014年5月18日十六点48分08秒，修改：2014年5月18日17点20分12秒}]，ApplicantTraining：[{id为：1，applicant_id： 2，称号：标题1，院：研究院1，training_year：2013，位置：本地插件，创造：二〇一四年五月十八日十六点48分08秒，修改：2014年5月18日十七点20分12秒}]}]
这可能吗？我该怎么办呢？请帮我。
感谢。
解决方案
下面是具体步骤：
- 您的搜索方法返回数据作为JSON 。
- 然后在 jQuery的模板页面循环的数据。
这里是另一种方法
更新
从您的搜索方法简单的返回JSON结果：
公共职能searchData（）{
$这 - ＆GT;布局='阿贾克斯';
$这 - ＆GT; autoRender = FALSE;
如果（$这个 - ＆GT;请求 - '是（'后'））{
如果（！空（$数据））{
$数据= $这个 - ＆GT;请求 - ＆GT;的数据;
//生成选项
...
$结果= $这个 - ＆GT; ModelName-＆GT;找到（'所有'，$选择）; //$选择生成选项
$这 - ＆GT;集（紧凑型（$结果））;
$这 - ＆GT;设置（'_序列化'，阵列（'结果'））;
回声json_en code（$结果）;
}
}
}
使用和循环JSON结果数据
I am using CakePHP 2.3.6. In one of my projects, I have to implement the Searching feture, using AJAX. Normally, this is working, but I want that the page won't reload, the result table will be immediately updated with the data.
This is the Controller code:
public function searchData(){
$this->set(............);
$this->set(............);
$this->set(............);
if($this->request->is('post')){
$this->layout='ajax';
$this->autoRender=false;
if(!empty($data)){
$data=$this->request->data;
// Generating options
.
.
.
$result=$this->ModelName->find('all',$options);// "$options" is generated options
if(!empty($result)){
$this->set(compact($result));
$this->set('_serialize',array('result'));
print_r(json_encode($result));
$this->Session->setFlash("Searching Applicants Successful");
$this->set('result',$result);
}else
$this->Session->setFlash("No data found");
}else
$this->Session->setFlash("You didn't give any info to search for");
}
}
My View file(search_data.ctp) :
<h3>Search Result</h3>
<?php
echo $this->form->create();
echo $this->Form->input('field1',array('type'=>'text,'div'=>false));
echo $this->Form->input('field2',array('type'=>'text,'div'=>false));
echo $this->Form->input('field3',array('type'=>'text,'div'=>false));
echo $this->Form->input('field4',array('type'=>'text,'div'=>false));
echo $this->Form->submit('Search');
echo $this->Form->end();
<div id="searchResult">
<?php if(!empty($result)){?>
<table class="table table-striped table-bordered table-hover">
<thead>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
<th>Field 4</th>
</thead>
<tbody>
<?php foreach($result as $applicant){?>
<tr>
<td><?php echo $result['ModelName']['field1'];?></td>
<td><?php echo $result['ModelName']['field2'];?></td>
<td><?php echo $result['ModelName']['field3'];?></td>
<td><?php echo $result['ModelName']['field4'];?></td>
</tr>
<?php }?>
</tbody>
</table>
<?php
}else
echo "No data found";
?>
</div>
Here, what I want is, when I submit the form, the "result" div will immediately appear, with the result data, organized in the table. I want to use Ajax here, so that users will get the result immediately, it'll improve the performance and user experience.
I've seen some youtube videos, where they load another page with the result, and shows that page in a div (it is called "success" div most of the time :) ), using Ajax. I can do it. But, I just want to do everything in 1 page, I don't want to use 2 pages to do it.
I tried this for ajax request and update my "result" div(in my search_data.ctp file) :
$this->Js->get('.search-form')->event('submit',$this->Js->request(array('controller'=>'cntrlr_name','action'=>'searchData'),array('async'=>true,'update'=>'#searchResult')));
And when I run the page, this is the output :
[{"Applicant":{"id":"3","name":"Name 2","email":"ssaha.316@gmail.com","mobile":"9082730572","contact_phone":"3465360980","office_phone":"2437845693","correspondence_address":"Correspondence Address 2","permanent_address":"Permanent Address 2","preferred_work_areas":"Field 1, Field 2, Field 3","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"},"ApplicantAcademicQualification":[{"id":"2","applicant_id":"3","level":"Bachelor(Pass)","degree_title":"B.A.","passing_year":"1999","institution":"Institution 2","result":"4.2","major":"Bengali Literature","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}],"ApplicantEmploymentHistory":[{"id":"2","applicant_id":"3","employer":"Employer 2","position_held":"Position 2","industry":"Industry 2","department":"Department 2","major_responsibilities":"Responsibility 2","job_location":"Local","key_achievement":"Achievement 2","served_from":"1999-08-15","served_till":"2010-02-12","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}],"ApplicantOther":[{"id":"2","applicant_id":"3","academic_activities":"Academic Activities 2","non_academic_activities":"Non Academic Activities 2","main_reason_for_applying":"Reason 2","worked_before":"0","last_position":"","work_location_constraint":"1","ready_to_join_on":"2008-08-14","expected_salary":"30k+","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}],"ApplicantProfessionalQualification":[{"id":"2","applicant_id":"3","name_of_certificate":"Certificate 2","institute":"Institute 2","from":"2002-10-17","to":"2007-10-12","location":"Local Ins.","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}],"ApplicantTraining":[{"id":"2","applicant_id":"3","title":"Title 2","institute":"Institute 2","training_year":"1995","location":"In Company","created":"2014-05-31 18:22:17","modified":"2014-05-31 18:22:17"}]},{"Applicant":{"id":"2","name":"Name 1","email":"user1@email.com","mobile":"715414918934","contact_phone":"2357295090","office_phone":"083656987398","correspondence_address":"Address 1_1","permanent_address":"Address 1_2","preferred_work_areas":"Field 1, Field 2, Field 3","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"},"ApplicantAcademicQualification":[{"id":"1","applicant_id":"2","level":"Secondary","degree_title":"S.S.C","passing_year":"2009","institution":"Institute 1","result":"4","major":"Science","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}],"ApplicantEmploymentHistory":[{"id":"1","applicant_id":"2","employer":"Employer 1","position_held":"Position 1","industry":"Industry 1","department":"Department 1","major_responsibilities":"Responsibilities 1","job_location":"Local","key_achievement":"Achievements 1","served_from":"2005-03-12","served_till":"2007-11-26","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}],"ApplicantOther":[{"id":"1","applicant_id":"2","academic_activities":"Academic Activities 1","non_academic_activities":"Non Academic Activities 1","main_reason_for_applying":"Reason 1","worked_before":"1","last_position":"Last Position 1","work_location_constraint":"1","ready_to_join_on":"2008-07-10","expected_salary":"20k-25k","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}],"ApplicantProfessionalQualification":[{"id":"1","applicant_id":"2","name_of_certificate":"Certificate 1","institute":"Institute 1","from":"2011-10-11","to":"2012-09-11","location":"Local Ins.","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}],"ApplicantTraining":[{"id":"1","applicant_id":"2","title":"Title 1","institute":"Institute 1","training_year":"2013","location":"Local Ins.","created":"2014-05-18 16:48:08","modified":"2014-05-18 17:20:12"}]}]
Is it possible ? How can I do it ? Please help me.
Thanks.
解决方案
Here are the steps:
- Your search method returns data as JSON.
- Then on your page loop data in jquery template.
Here is an example of how to use jQuery templates, and here it's documentation
Here is another approach
UPDATE
simple return json results from your search method:
public function searchData(){
$this -> layout = 'ajax';
$this -> autoRender = false;
if($this->request->is('post')){
if(!empty($data)){
$data=$this->request->data;
// Generating options
...
$result = $this->ModelName->find('all',$options);// "$options" is generated options
$this -> set(compact($result));
$this -> set('_serialize',array('result'));
echo json_encode($result);
}
}
}
Use and loop JSON results data
这篇关于在CakePHP中使用Ajax搜索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
