JQUERY 表单异步提交

最新推荐文章于 2021-03-12 07:10:20 发布

苍羽

最新推荐文章于 2021-03-12 07:10:20 发布

阅读量436

点赞数

分类专栏：网页特效网站前端效果 JQuery 文章标签：网页特效网站前端效果 JQuery

JQuery 同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

网站前端效果

22 篇文章 0 订阅

订阅专栏

网页特效

20 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head runat="server">
  <meta charset="UTF-8">
    <title>JQUERY 表单异步提交</title>
    <!-- JQUERY 类库 -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function()
        {
            $('#myform').submit(function(){
                jQuery.ajax({
	                url: "/ajaxjsonform",   // 提交的页面
                    data: $('#myform').serialize(), // 从表单中获取数据
                    type: "POST",                   // 设置请求类型为"POST"，默认为"GET"
                    beforeSend: function()          // 设置表单提交前方法
                    {
						//提交过程中锁屏
                        new screenClass().lock();
                    },
                    error: function(request) {      // 设置表单提交出错
						//提交完成后无论成功与否都解除锁定
                        new screenClass().unlock();
                        alert("表单提交出错，请稍候再试");
                    },
                    success: function(data) {
						//提交完成后无论成功与否都解除锁定
                        new screenClass().unlock(); // 设置表单提交完成使用方法
                    }
                });
                return false;//前台测试用
                //return true;//生产环境
            });
        });

    var screenClass = function()
    {
        /// 解锁
        this.unlock = function()
        {
            var divLock = document.getElementById("divLock");
            if(divLock == null) return;
            document.body.removeChild(divLock);
        };

        /// 锁屏
        this.lock = function()
        {
            var sWidth,sHeight;
            var imgPath = "wait.gif";
            sWidth  = screen.width - 20;
            sHeight = screen.height- 170;

            var bgObj=document.createElement("div");
            bgObj.setAttribute("id","divLock");
            bgObj.style.position="absolute";
            bgObj.style.top="0";
            bgObj.style.background="#cccccc";
            bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
            bgObj.style.opacity="0.6";
            bgObj.style.left="0";
            bgObj.style.width=sWidth + "px";
            bgObj.style.height=sHeight + "px";
            bgObj.style.zIndex = "100";
            document.body.appendChild(bgObj);
            var html = "<table border=\"0\" width=\""+sWidth+"\" height=\""+sHeight+"\"><tr><td valign=\"middle\" align=\"center\"><image src=\""+imgPath+"\"></td></tr></table>";
            bgObj.innerHTML = html;
            // 解锁
            bgObj.onclick = function()
            {
                 //new screenClass().unlock();
            }
        };
    }
    </script>
</head>

<body>
    <form id="myform" runat="server">
    <div>
        姓名：<input type="text" id="txtUsername" name="txtUsername" value=""><br />
        年龄：<input type="text" id="txtAge" name="txtAge" value=""><br />
        备注：<input type="text" id="txtDescription" name="txtDescription" value=""><br />
        候时：<input type="text" id="txtWaitTime" name="txtWaitTime" value=""><br />
        <input type="submit" id="btnSubmit" name="btnSubmit" value="提交">
    </div>
    </form>
</body>
</html>

转自：http://www.cnitblog.com/hj627/articles/61395.html