EasyUI异步请求与响应,并且右下角提示框

EasyUI填充Form表单,异步提交Form表单数据并返回提示结果
以下是核心代码
<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

评论