EasyUI填充Form表单,异步提交Form表单数据并返回提示结果
以下是核心代码
源码下载地址链接:https://pan.baidu.com/s/1LQ9GHi_0QGihtcnHFGNoig 提取码:t37e
以下是核心代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>个人设置</title> <link href="./jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="./jquery-easyui-1.3.2/themes/icon.css" rel="stylesheet" type="text/css" /> <script src="./jquery-1.8.0.min.js" type="text/javascript"></script> <script src="./jquery-easyui-1.3.2/jquery.easyui.min.js" type="text/javascript"></script> <script src="./jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js" type="text/javascript"></script> </head> <body> <form id="formEdit" method="post" action=""> <br /> <br /> <br /> <div class="fitem"> <label> 帐号: </label> <input class="easyui-validatebox" type="text" name="account" readonly="readonly" style="background-color:gainsboro; width:275px;" /> </div> <div class="fitem"> <label> 密码: </label> <input class="easyui-validatebox" type="text" id="passwd" name="passwd" style="width:275px;" /> </div> <div class="fitem"> <label> 公司名称: </label> <input class="easyui-validatebox" type="text" name="companyName" style="width:275px;" /> </div> <div class="fitem"> <label> 地址: </label> <input class="easyui-validatebox" type="text" name="Address" style="width:275px;" /> </div> <input class="easyui-validatebox" type="hidden" name="Id" /> <br /> <div class="fitem"> <input id="button1" type="button" value="修改" style="margin-left:180px; width:75px;" /> </div> </form> <script type="text/javascript"> $(function () { $('#formEdit').form('load', '../adminweb/GetAccountJson?src=edit&id=kh'); //注意ajax不能跨域 adminweb/GetAccountJson?src=edit&id=kh响应数据 //{"Id":1,"account":"kh","passwd":"123456","companyName":"XX有限公司","Address":"广东珠海","isLock":false,"typeId":1} }); $("#button1").click(function () { $('#formEdit').form('submit', { url: '../adminweb/GetAccountJson?src=save', onSubmit: function () { return $(this).form('validate'); }, success: function (data) { var result = $.parseJSON(data); //adminweb/GetAccountJson?src=save响应数据 {"code":"1","msg":"保存成功!"} $.messager.show({ title: '提示', msg: result.msg }); } }); }); </script> </body> </html>效果图片
源码下载地址链接:https://pan.baidu.com/s/1LQ9GHi_0QGihtcnHFGNoig 提取码:t37e