note

笔记的删除功能

发送Ajax请求

绑定事件:监听alert页面创建按钮(给按钮增加ID:deleteNote)

$("#can").on("click","#deleteNote",function(){});

获取参数:笔记ID

var $li=$("#note_ul a.checked").parent(); var noteId=$li.data("noteId");

发送请求: /note/delete.do

服务器处理

DeleteNoteController.execute(String noteId)

NoteService.deleteNote(String noteId);

NoteDao.update(String noteId)

Mapper:

<update id="update" parameterType="String"> update cn_note set cn_note_status_id='2' where cn_note_id=#{id} </update>

Ajax回调处理

success:

删除笔记列表中的li元素

提示:笔记删除成功

success:function(result){ if(result.state==0){ $li.remove(); alert("删除笔记成功"); } }

error:提示笔记删除失败

----------------------------------------------------------------------------------------

代码如下：

----------------------------------------------------------------------------------------

Dao接口：

//删除笔记(本质是修改cn_note_status_id =2) public int update(String noteId);

返回int值，若为1，则表示更新成功

----------------------------------------------------------------------------------------

映射文件：

<!-- 删除笔记(本质是修改cn_note_status_id =2) --> <update id="update" parameterType="string"> update cn_note set cn_note_status_id = '2' where cn_note_id = #{id} </update>

----------------------------------------------------------------------------------------

业务层接口：

//删除笔记(本质是修改cn_note_status_id =2) public NoteResult<Object> deleteNote(String noteId);

----------------------------------------------------------------------------------------

业务层实现类：

//删除笔记(本质是修改cn_note_status_id =2) public NoteResult<Object> deleteNote(String noteId) { NoteResult<Object> result = new NoteResult<Object>(); int rows = dao.update(noteId); if(rows == 0){ result.setStatus(1); result.setMsg("删除笔记失败"); return result; } result.setStatus(0); result.setMsg("删除笔记成功"); return result; }

----------------------------------------------------------------------------------------

控制层Controller：

package cn.tedu.cloud_note.controller; 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.service.NoteService; import cn.tedu.cloud_note.util.NoteResult; @Controller @RequestMapping("/note") public class DeleteNoteController { @Resource(name="noteService") private NoteService service; @RequestMapping("/delete.do") @ResponseBody public NoteResult<Object> execute(String noteId){ NoteResult<Object> result = service.deleteNote(noteId); return result; } }

----------------------------------------------------------------------------------------

HTML部分代码：

//笔记下拉按钮的删除按钮弹出对话框 $("#note_ul").on("click",".btn_delete",alertDeleteNoteWindow); //功能(单击删除按钮,弹出删除页面成功后弹窗提示删除成功) $("#can").on("click","#deleteNote",deleteNote);

----------------------------------------------------------------------------------------

引用的JS代码：

//弹出删除笔记对话框 function alertDeleteNoteWindow(){ $("#can").load("alert/alert_delete_note.html"); $(".opacity_bg").show(); }

-----------------------------------------------------------

//删除笔记 function deleteNote(){ //获取笔记ID var $li = $("#note_ul a[class='checked']").parent(); var noteId = $li.data("noteId"); //console.log(noteId); //发送ajax请求 $.ajax({ url:path + "/note/delete.do", type:"post", data:{"noteId":noteId}, dataType:"json", success:function(result){ if(result.status == 0){ console.log("OOKK"); //将笔记列表中的笔记删除 $li.remove(); alert(result.msg); } }, error:function(){alert("删除笔记失败");} }); }

测试结果：