教你一步步做 Restful程序（4）

教你一步步做 Restful程序（4）

  新增用户，客户端代码 user_add.html：

user_add.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<link type="text/css" href="../css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> <script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> <script type="text/javascript" src="../js/messages_cn.js"></script> <script type="text/javascript" src="../js/kindeditor-min.js"></script> <script type="text/javascript"> $(function(){ KE.show({ id:"desc", imageUploadJson:"../../../upload_img" }); $("input[name='birthday']").datepicker({dateFormat:"yy-mm-dd"}); $("#btn_close").click(function(){ window.parent.$(".add_user_dlg").dialog("destroy"); }); $("#myform").validate({submitHandler:function(){ $.ajax({ type:"post", url:"user", cache:false, dataType:"json", data:{ loginCode:$("input[name='loginCode']").val(), name:$("input[name='name']").val(), password:$("input[name='password']").val(), birthday:$("input[name='birthday']").val() }, success:function(result) { if (result.code == 1 ) { window.parent.refresh(); alert("添加成功！"); $("#btn_close").click(); } else { alert("添加失败!原因：！" + result.msg); } } }); }}); }); </script>

  表单：

1 2 3 4 5 6 7 8 9

<form id="myform"> 用户登录编码：<input type="text" name="loginCode" class="required"/><br/> 姓名：<input type="text" name="name"/><br/> 登录密码：<input type="text" name="password"/><br/> 出生日期：<input type="text" name="birthday"/><br/> 描述：<textarea id="desc" cols="60" rows="10"></textarea><br/> <input type="submit" value="新增" id="btn_add"/> <input type="button" value="关闭" id="btn_close"/> </form>

  修改的客户端代码(user_modify.html)：

user_modify.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="../js/jquery.query.js"></script> <script type="text/javascript"> $(function(){ $("#btn_save").click(function(){ $.ajax({ type:"post", url:"user/" + $.query.get("uid") , dataType:"json", data:{'loginCode':$(".code").val(),'name': $(".name").val(),'birthday':$(".birthday").val()}, success:function(result) { if (result.code == 1 ) { window.parent.refresh(); alert("修改成功！"); $("#btn_close").click(); } else { alert("修改失败!！"); } } }); }); $("#btn_close").click(function(){ window.parent.$(".modify_user_dlg").dialog("destroy"); }); $.ajax({ type:"get", url:"user/" + $.query.get("uid") , dataType:"json", success:function(result) { if (result.code == 1 ) { $(".code").val(result.data.loginCode); $(".name").val(result.data.name); $(".birthday").val(result.data.birthday); } else { alert("取用户数据发生错误!！"); } } }); }); </script>

1 2 3 4 5

登录编码：<input type="text" class="code"></input><br> 用户名：<input type="text" class="name"></input><br> 出生日期：<input type="text" class="birthday"></input><br> <input type="button" value="保存" id="btn_save"/> <input type="button" value="关闭" id="btn_close"/>

  查看的客户端代码(user_detail.html)：

user_detail.html

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$(function(){ $("#btn_close").click(function(){ window.parent.$(".view_user_dlg").dialog("destroy"); }); $.ajax({ type:"get", url:"user/" + $.query.get("uid") , dataType:"json", success:function(result) { if (result.code == 1 ) { $(".code").text(result.data.loginCode); $(".name").text(result.data.name); $(".birthday").text(result.data.birthday); } else { alert("取用户数据发生错误!！"); } } }); }); </script>

1 2 3 4

登录编码：<span class="code"></span><br> 用户名：<span class="name"></span><br> 出生日期：<span class="birthday"></span><br> <input type="button" value="关闭" id="btn_close"/>

  删除的客户端代码已经在mian.html中提供，大家可以看到的。

本文转载于：http://yanyaner.com/blog/2012/12/28/restful4/

刘江华的博客