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提示保存笔记失败

  　　此时，保存成功后alert提示框关闭不了，这是因为这里的alert是经过处理过的，要想关闭就要对它进行处理