java版云笔记(四)
页面的笔记本加载完成了,接下来就是点击笔记本显示将笔记显示,同时把笔记在右边的编辑器中,同时把编辑后的笔记更新。
注:这个项目的sql文件,需求文档,需要的html文件,jar包都可以去下载,下载地址为:http://download.csdn.net/download/liveor_die/9985846
笔记列表显示
前面我们把bookId通过下面的jq代码绑定在li上(笔记本的列表id=note_ul)
$li.data("bookId",bookId);//将值与jQuery对象元素绑定
通过点击笔记本触发加载笔记的事件
$("#book_ul").on("click","li",loadBookNotes);
触发的js代码如下,同时把noteId绑定在li上
//根据笔记本ID加载笔记列表function loadBookNotes(){ //设置选中效果 $("#book_ul a").removeClass("checked"); $(this).find("a").addClass("checked"); //获取请求参数 var bookId = $(this).data("bookId"); //发送Ajax请求 $.ajax({ url:path+"/note/loadnotes.do", type:"post", data:{"bookId":bookId}, dataType:"json", success:function(result){ if(result.status==0){ var notes = result.data;//获取笔记信息 //清除原有笔记列表信息 $("#note_ul li").remove(); //$("#note_ul").empty(); //循环处理 for(var i=0;i<notes.length;i++){ //获取笔记ID var noteId = notes[i].cn_note_id; //获取笔记标题 var noteTitle = notes[i].cn_note_title; //创建一个笔记列表li元素 createNoteLi(noteId,noteTitle); } } }, error:function(){ alert("加载笔记列表失败"); } });};//创建笔记列表function createNoteLi(noteId,noteTitle){ var sli = ""; sli+='<li class="online">'; sli+=' <a>'; sli+=' <i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'; sli+= noteTitle; sli+=' <button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>'; sli+=' </a>'; sli+=' <div class="note_menu" tabindex="-1">'; sli+=' <dl>'; sli+=' <dt><button type="button" class="btn btn-default btn-xs btn_move" title="移动至..."><i class="fa fa-random"></i></button></dt>'; sli+=' <dt><button type="button" class="btn btn-default btn-xs btn_share" title="分享"><i class="fa fa-sitemap"></i></button></dt>'; sli+=' <dt><button type="button" class="btn btn-default btn-xs btn_delete" title="删除"><i class="fa fa-times"></i></button></dt>'; sli+=' </dl>'; sli+=' </div>'; sli+='</li>'; //将笔记ID绑定到li元素上 var $li = $(sli); $li.data("noteId",noteId); //将li元素添加笔记列表ul中 $("#note_ul").append($li);};
发送Ajax请求
- 发送事件:笔记本li元素的单击
- 请求参数:笔记本ID
- 请求地址:/note/loadnotes.do
服务器端处理
/note/loadnotes.do
-->LoadNotesController.execute
-->NoteService.loadBookNotes
-->NoteDao.findByBookId
-->cn_note(查询)
-->返回JSON结果
cn_user(用户)
cn_notebook(笔记本,cn_user_id)
cn_note(笔记,cn_notebook_id,cn_user_id)
Ajax回调处理
- 成功:解析服务器返回的JSON结果,提取
笔记信息,生成笔记li元素列表 - 失败:提示加载笔记列表失败
$(function(){ //发送Ajax请求-->服务器端处理-->回调处理 //给li绑定单击(可以给未来元素绑定on) 父元素.on("事件类型",子元素,fn处理);})
笔记加载到编辑器中
点击笔记将笔记的内容和标题显示到编辑器中。
//点击笔记li加载笔记信息 $("#note_ul").on("click","li",loadNote);
//根据笔记ID加载笔记信息function loadNote(){ //设置选中效果 $("#note_ul a").removeClass("checked"); $(this).find("a").addClass("checked"); //获取请求参数 var noteId = $(this).data("noteId"); //发送Ajax请求 $.ajax({ url:path+"/note/load.do", type:"post", data:{"noteId":noteId}, dataType:"json", success:function(result){ if(result.status==0){ //获取返回的笔记标题 var title =result.data.cn_note_title; //获取返回的笔记内容 var body =result.data.cn_note_body; body=body+""; //设置到编辑区 $("#input_note_title").val(title);//设置笔记标题 um.setContent(body);//设置笔记内容 } }, error:function(){ alert("加载笔记信息失败"); } });};
发送Ajax请求
- 发送事件:笔记列表li元素的单击
- 请求参数:笔记ID
- 请求地址:/note/load.do
服务器端处理
/note/load.do
-->LoadNoteController.execute
-->NoteService.loadNote
-->NoteDao.findById
-->cn_note
-->返回JSON结果
Ajax回调处理
- success:解析返回的JSON结果,将标题和内容
显示到编辑区位置 - error:alert("加载笔记信息失败");
更新笔记信息
点击保存笔记时,把编辑器中的文本信息获取到然后进行更新。
//"保存按钮"的处理(更新笔记信息) $("#save_note").click(updateNote);
//更新笔记信息function updateNote(){ //获取请求参数 var $li = $("#note_ul a.checked").parent(); var noteId = $li.data("noteId");//笔记ID var noteTitle =$("#input_note_title").val().trim();//笔记标题 var noteBody = um.getContent();//获取笔记内容 //发送Ajax请求 $.ajax({ url:path+"/note/update.do", type:"post", data:{"noteId":noteId,"title":noteTitle,"body":noteBody}, dataType:"json", success:function(result){ if(result.status==0){ //更新标题 var str = ""; str+='<i class="fa fa-file-text-o" title="online" rel="tooltip-bottom"></i>'; str+= noteTitle; str+='<button type="button" class="btn btn-default btn-xs btn_position btn_slide_down"><i class="fa fa-chevron-down"></i></button>'; //将str替换到笔记li的a元素里 $li.find("a").html(str); //提示成功 alert(result.msg); } }, error:function(){ alert("保存笔记失败"); } });};
发送Ajax请求
- 发送事件:"保存笔记"按钮的单击
- 请求参数:笔记ID,笔记标题,笔记内容
- 请求地址:/note/update.do
服务器端处理
/note/update.do
-->UpdateNoteController.execute
-->NoteService.updateNote
-->NoteDao.update(Note note)
-->cn_note(更新)
-->返回JSON结果
Ajax回调处理
- success:alert提示保存笔记成功
- error:alert提示保存笔记失败
如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!欢迎各位转载,但是未经作者本人同意,转载文章之后必须在文章页面明显位置给出作者和原文连接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步