提交表单，提示用户等待 ajax,jquery

最新推荐文章于 2021-06-20 04:49:09 发布
最新推荐文章于 2021-06-20 04:49:09 发布
阅读量4.8k 收藏 2
点赞数
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lileiyang12/article/details/12157799
版权

由于各种原因导致不能立即提交表单，此时不想用户点击按钮，需要提示并“屏蔽”网页事件。

官网参考代码：http://jquery.malsup.com/block/#page

实践代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title></title>
 <link rel="Stylesheet" href="jquery-ui.css" />
 <link rel="Stylesheet" href="jq.css" />
 <link rel="Stylesheet" href="block.css" />
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript" src="jquery-ui.min.js"></script>
 <script type="text/javascript" src="jquery.blockUI.js"></script>
 <script type="text/javascript" src="chili-1.7.pack.js"></script>
 <script type="text/javascript">
 $(function ($) {
 "use strict";
  
 // global hook - unblock UI when ajax request completes
 $(document).ajaxStop($.unblockUI);
  
 $('#main').tabs({
 select: function (e, ui) {
 var href = $(ui.tab).attr('href');
 window.location.hash = href;
 }
 });
  
 //
 // page blocking example
 //
 $('#pageDemo1').click(function () {
 $.blockUI();
 });
 $('#pageDemo2').click(function () {
 $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
 });
 $('#pageDemo3').click(function () {
 $.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });
 });
 $('#pageDemo4').click(function () {
 $.blockUI({ message: $('#domMessage') });
 });
 });
 </script>
 <style type="text/css">
 #overview h2 { border: 1px dashed gray; padding: 10px; background-color: #ffc;
 color: black; font-size: medium; margin: 10px 0;
 }
 #footer { font-family: sans-serif; color: #888 }
 #domMessage { padding: 10px; }
 div.blockMe { padding: 30px; margin: 30px; border: 10px solid #ccc; background-color: #ffd }
 #question { background-color: #ffc; padding: 10px; }
 #question input { width: 4em }
  
 #demoTable { border: 1px solid #ddd }
 #demoTable tr.odd { background-color: #efe }
 #demoTable th { padding: 15px; background-color: #ffa }
 #demoTable td { padding: 15px; vertical-align: top }
 #tallContent h1 { margin: 15px }
 </style>
 </head>
 <body>
 <div id="domMessage" style="display:none;">
 <h1>We are processing your request. Please be patient.</h1>
 </div>
 <p />
 <input id="pageDemo1" class="demo"type="submit"value="Default Message" />
 <input id="pageDemo2" class="demo"type="submit"value="Custom Message" />
 <input id="pageDemo3" class="demo"type="submit"value="Custom Style" />
 <input id="pageDemo4" class="demo"type="submit"value="DOM Element as Message" />
 <p />
 </body>
 </html>

源码下载 ： http://download.csdn.net/detail/duhaomin/6337397

图片效果：



第二种：


源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        //关闭等待窗口
        function closediv() {
            //Close Div 
            document.body.removeChild(document.getElementById("bgDiv"));
            document.getElementById("msgDiv").removeChild(document.getElementById("msgTitle"));
            document.body.removeChild(document.getElementById("msgDiv"));
        }
        //显示等待窗口
        function showdiv(str) {
            var msgw, msgh, bordercolor;
            msgw = 400; //提示窗口的宽度 
            msgh = 100; //提示窗口的高度 
            bordercolor = "#336699"; //提示窗口的边框颜色 
            titlecolor = "#99CCFF"; //提示窗口的标题颜色 


            var sWidth, sHeight;
            sWidth = window.screen.availWidth;
            sHeight = window.screen.availHeight;


            var bgObj = document.createElement("div");
            bgObj.setAttribute('id', 'bgDiv');
            bgObj.style.position = "absolute";
            bgObj.style.top = "0";
            bgObj.style.background = "#777";
            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";
            document.body.appendChild(bgObj);
            var msgObj = document.createElement("div")
            msgObj.setAttribute("id", "msgDiv");
            msgObj.setAttribute("align", "center");
            msgObj.style.position = "absolute";
            msgObj.style.background = "white";
            msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.border = "1px solid " + bordercolor;
            msgObj.style.width = msgw + "px";
            msgObj.style.height = msgh + "px";
            msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";
            msgObj.style.left = (sWidth - msgw) / 2 + "px";
            var title = document.createElement("h4");
            title.setAttribute("id", "msgTitle");
            title.setAttribute("align", "right");
            title.style.margin = "0";
            title.style.padding = "3px";
            title.style.background = bordercolor;
            title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
            title.style.opacity = "0.75";
            title.style.border = "1px solid " + bordercolor;
            title.style.height = "18px";
            title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
            title.style.color = "white";
            //title.style.cursor = "pointer";
            //title.innerHTML = "关闭";
            //title.onclick = closediv;
            document.body.appendChild(msgObj);
            document.getElementById("msgDiv").appendChild(title);
            var txt = document.createElement("p");
            txt.style.margin = "1em 0"
            txt.setAttribute("id", "msgTxt");
            txt.innerHTML = str;
            document.getElementById("msgDiv").appendChild(txt);
        }
        //屏蔽F5
        document.onkeydown = mykeydown;
        function mykeydown() {
            if (event.keyCode == 116) //屏蔽F5刷新键   
            {
                window.event.keyCode = 0;
                return false;
            }
        }  
    </script>
</head>
<body>
    <form id="form1">
    <div>
    <INPUT οnclick="showdiv('表达数据提交中<br/>请稍候........ <br/>' );" type="button" value="提交数据">
    </div>
    </form>
</body>
</html>

第三种：


<html>
　　<title>页面提交时出现等待窗口示例</title>
　　<head>
　　<SCRIPT LANGUAGE="JavaScript">
　　<!--
　　//By Dicky 2005-2-17 11:16:49
　　function Window_Load(Flag)
　　{
　　if (Flag == 0)
　　{
　　 document.all['Loading'].style.display = 'block';
　　 //show the window
　　}
　　else
　　{
　　 document.all['Loading'].style.display = 'none';
　　 //hide the window
　　}
　　}
　　//-->
　　</SCRIPT>
　　</head>
　　<body leftMargin=0 topMargin=50 οnlοad="Window_Load(1);">
　　<div id="Loading" style="position:absolute;z-index:3;top:200px;left:250px;width:250;height:60;border-width:1;border-style:ridge;background-color:green;padding-top:10px"><center><table border="0"><tr><td valign="middle"><img src="http://doc.readmen.com/10/cursor.gif" border="0" WIDTH="30" HEIGHT="30"></td><td>&nbsp;&nbsp;</td><td valign="middle"><span id=txtLoading0 style="font-size:14px;">正在初始化页面,请稍候...</span><br><span id=txtLoading1 style="font-size:14px;">Loading,please wait...</span></td></tr></table></center></div>
　　<form name="form1" method="post" action="" onSubmit="Window_Load(0);">
　　<center>页面提交时出现等待窗口示例<input name=submit type=submit value='提交'>
　　</center>
　　</form>
　　</body>
　　</html>








duhaomin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery esayui loading等待特效
11-25
自己做的基于 esayui 的等待特效。全js+css，无需图片资源。资源包含easyui 1.7.0版本和jquery。如果使用其他版本请替换并正确引入easyui的css和easyui.min.js文件即可
form表单提交前进行ajax或js验证，校验不通过不提交
了迹奇有没
02-16 3159
在使用form表单进行提交数据前，需要进行数据的校验->表单的校验（如：两次密码输入是否相同）+后台数据的校验（如：账号是否存在），这个时候，如果哪步校验不通过，表单将停止提交，同时避免后台主键唯一的报错。 那么，如何实现呢，首先，需要再form表单处加入οnsubmit=“return 方法名();” 第二步，写方法，下面是我的例子，供大家参考： <!--js普通校验--> f...
提交表单时的等待效果动画
glgom的博客
03-12 4539
在某些表单提交中，为了更好的用户体验，会加一个等待框，以便于告诉用户系统正在进行数据提交。下面是自己用js和css写的一个等待效果。如图。 等待效果 js代码： function showWaiting(){ var node=document.createElement("div"); //创建一个div元素节点，作为整个背景的容器 var nodeClass=docume...
Ajax发送请求等待时弹出模态框等待提示
qq_30629571的博客
10-08 7254
主要的代码分为两块，一个是CSS定义模态框，另一个是在Ajax中弹出模态框。 查看菜鸟教程中的模态框教程demo，http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-modal点击打开链接 Bootstrap 实例 - 模态框（Modal）插件 创建模态框（Modal） 开始演示模态框
html + css实现等待页面动画效果，附部分属性解析
qq_52340302的博客
05-13 1985
HTML代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="./css/style.css"> <title></title> </head> <body> <div class="loading"> <span>Waiting.
html表单如何提示信息,表单提示信息
weixin_34517026的博客
06-20 3825
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部。成功状态你输入的信息是正确的…运行效果如下或查看右侧结果窗口：具体样式代码请查看bootstrap.css文件第1922行～第1927行：.help-block {display: block;margin-top: 5px;m...
提交表单的过程中显示loading等待
管子（zero）的杂乱空间
12-16 4877
提交表单的过程中显示loading等待演示XML/HTML Codeform method="post" action="" name="subscribeForm">      fieldset>          label>Name: label>input type="text" class="effect" name="name">      fieldset>        field
提交表单时的等待(loading)效果
weixin_30908941的博客
11-26 2439
$(document).ready(function () { $("body").prepend('<div id="overlay" class="ui-widget-overlay" style="z-index: 999999; display: none;"></div>'); //背景透明图 $("body").prepend...
jquery简单实现表单提交后的需要等待效果
酷酷哒蚂蚁的梦(无欲则刚)
01-05 8939
简单来说就是遮罩然后加载个动画，往上有利用js手动更改html值实现缓冲动画的，比较麻烦，感觉性价比不高，毕竟谁也不会没事一直在那加载很多张这种等待动画。 主要也就是利用了position里面的fixed这个属性，设置之后页面内的其他元素均不可点击，保证页面安全 //链接文件就不写了，自己调一下就ok .cover { text-align: center; } //positi
javascript的高级使用，设置页面元素是否相应事件与显示“正在处理”对话框
默客的专栏
03-31 998
var oProgressLayer=null;/************************************************************************************************// 设置网页上所有元素为不可响应事件，以及设置鼠标光标为wait**********************************************
html5表单提交按钮圆形进度条加载动画
09-25
html5圆形进度条加载按钮是一款modernizr html5表单提交按钮圆形进度条加载动画表单验证效果。
18种css3带进度条的表单提交按钮动画
12-13
这个插件是使用css3属性制作的带进度条的表单提交按钮动画效果。当用户点击提交按钮后，提交按钮上出现进度条提示提交的进度。有18种效果，包括翻转，旋转，3d透视等效果。
Jquery 等待弹出框插件jquery.blockUI（遮罩蒙板）
08-10
NULL 博文链接：https://xinjiatao.iteye.com/blog/2210769
jQuery使用$.ajax提交表单完整实例
11-23
本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考，具体如下： 首先，新建Login.html页面： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
JQuery通过Ajax提交表单并返回结果
12-08
在介绍使用JQuery提交表单前，我们需要首先引用jquery.form.js，它来自于http://www.malsup.com/jquery/form/，至此，我们需要引用的JS文件有： 功能要求：Ajax提交表单，在控制器HelloWorld4Controller中处理请求...
jQuery ajaxSubmit 实现ajax提交表单局部刷新
10-22
主要介绍了jQuery ajaxSubmit 实现ajax提交表单局部刷新 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
jQuery基于Ajax方式提交表单功能示例
10-20
主要介绍了jQuery基于Ajax方式提交表单功能,结合实例形式分析了jQuery使用ajax方式提交表单的具体步骤与常见操作技巧,需要的朋友可以参考下
jQuery提交表单ajax查询实例代码
12-11
看一个用jQuery提交表单ajax查询的例子。 基本功能：用户输入一个表单，输入准考证和验证码，验证用户是否输入表单，点击查询提交，然后从服务器得到返回的数据并显示出来。 代码如下： jQuery部分： 代码如下: ...
jQuery EasyUI 表单(Form)用法 ajax提交方法
最新发布
05-24
jQuery EasyUI 表单(Form)用法 ajax提交方法如下： 1.先定义一个表单，例如： ```html 姓名: 年龄: 地址: ``` 2.在JavaScript中使用ajax提交表单数据，例如： ```javascript $('#myForm'...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值