功能：用户输入收索的关键词，然后回车触发查询
------------------------------------------------------------------------------
发送ajax请求
发送事件：输入关键词后，点击回车（按键监听事件）
$("#search_note").keydown(function(event){ var code=event.keyCode; if(code==13){ 请求发送 } })
请求参数：输入的关键词
请求地址：/share/search.do
服务器处理
Controller
Service
Dao
cn_share（select操作 模糊查询）
select * from cn_share where cn_share_title like =#{keyword} limit #{begin} , 3;
ajax回调处理
success：
1.影藏笔记列表的DIV（id='pc_part_2'）调用hide方法
2.显示收索笔记结果列表（id='pc_part_6'）
3.将解析后的结果添加到列表里面
error：提示收索失败
------------------------------------------------------------------------------
Share实体类：
public class Share implements Serializable{ private String cn_share_id; private String cn_share_title; private String cn_share_body; private String cn_note_id;------------------------------------------------------------------------------
Dao接口：
//搜索笔记(已经分享过的笔记) public List<Share> findByTitle(Map params);
注意：单击回车键之后进行模糊查询，且显示第一页，具有分页功能，所以需要传递两个参数（搜索的关键词语和页码--此处页码设置为1）
------------------------------------------------------------------------------
映射文件：
<!-- 搜索笔记(已经分享过的笔记) --> <!-- 此种方法也可以,案例中是在Service层进行模糊匹配 select * from cn_share where cn_share_title like concat('%',#{title},'%') --> <select id="findByTitle" parameterType="map" resultType="cn.tedu.cloud_note.entity.Share"> select * from cn_share where cn_share_title like #{keyword} limit #{begin},3 </select>
------------------------------------------------------------------------------
业务层接口：
//搜索笔记 public NoteResult<List<Share>> searchNote(String title,int page);------------------------------------------------------------------------------
业务层实现类：
//搜索笔记 public NoteResult<List<Share>> searchNote(String title,int page) { NoteResult<List<Share>> result = new NoteResult<List<Share>>(); //模糊查询的匹配,也可以在映射文件进行%的匹配 String keyword = "%"; if(keyword != null && !keyword.equals("")){ keyword = "%" + title + "%";//若title为空字符串则查询全部 } int begin = (page - 1)*3;//计算抓取记录的起点 Map<String,Object> params = new HashMap<String,Object>(); params.put("keyword", keyword); params.put("begin", begin); List<Share> list = shareDao.findByTitle(params); if(list == null || list.size() == 0){//没有查到相关Share实例 result.setStatus(1); result.setMsg("没有查到相关笔记"); return result; } result.setStatus(0); result.setMsg("搜索笔记成功"); result.setData(list); return result; }注意：在业务层中对传入的搜索关键字进行匹配（添加%），然后将匹配后的参数传入Dao，并调用,若接收到的参数为空字符串，则相当于查询所有的分享笔记
------------------------------------------------------------------------------
控制层Controller：
package cn.tedu.cloud_note.controller; import java.util.List; import javax.annotation.Resource; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import cn.tedu.cloud_note.entity.Share; import cn.tedu.cloud_note.service.ShareService; import cn.tedu.cloud_note.util.NoteResult; @Controller @RequestMapping("/share") public class SearchNoteController { @Resource(name="shareService") private ShareService service; //分享笔记 @RequestMapping("/search.do") @ResponseBody public NoteResult<List<Share>> execute(String title,int page){ NoteResult<List<Share>> result = service.searchNote(title); return result; } }
------------------------------------------------------------------------------
HTML部分代码：
<script type="text/javascript"> var page = 1; $(function(){...在function外边定义全局变量 var page = 1;分页时候使用
//绑定搜索笔记,按回车，搜索结果分页显示(已经分享过的笔记,默显示第一页) $("#search_note").keydown(searchShareNote); //点击更多按钮,加载下一页(更多......) $("#more_note").on("click",moreSearchShare);
------------------------------------------------------------------------------
调用的JS代码：
//点击更多按钮,加载查询结果的下一页......(分页功能) function moreSearchShare(){ //获取请求参数 var title = $("#search_note").val().trim(); page = page + 1;//修改全局变量 //alert(title+":"+page); //发送ajax请求,加载列表 loadPageShare(title,page); } //按回车，加载搜索结果的第一页(已经分享过的笔记,默显示第一页) function searchShareNote(event){ var code = event.keyCode; if(code == 13){ //清空已有的Share列表 $("#share_ul li").empty(); //获取请求参数 var title = $("#search_note").val().trim(); //alert(title); //发送ajax请求 page = 1;//修改全局变量 不能直接传参数1 每一次搜索page都要重置为1 loadPageShare(title,page); } } //发送ajax请求 function loadPageShare(title,page){ $.ajax({ url:path + "/share/search.do", type:"post", data:{"title":title,"page":page}, dataType:"json", success:function(result){ if(result.status == 0){ //获取数据 var list = result.data;//Share的集合 //将显示笔记的DIV隐藏,更换为搜索笔记的DIV $("#pc_part_2").hide(); $("#pc_part_6").show(); //将数据写入搜索笔记的li for(var i=0;i<list.length;i++){ //记录ID var shareId =list[i].cn_note_id; //记录标题 var shareTitle = list[i].cn_share_title; //创建li对象 var $li = $( '<li class="online">'+ '<a>'+ '<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'+ shareTitle + '</a>'+ '</li>'); //绑定shareId $li.data("shareId",shareId); //将li添加到ul中 $("#share_ul").append($li); } } }, error:function(){alert("搜索笔记失败");} }); }
------------------------------------------------------------------------------
测试结果：
注意：在单击笔记本显示笔记列表时候要将其DIV显示，隐藏搜索share笔记的DIV，在单击更多......的时候，也是进行分页，此时可以调用相同的ajax
