ajax提交加载进度条示例代码

实现效果图

加载图片

实现方式： 在jsp页面中加入样式复制代码代码如下：进度{z-index: 2000} .掩模{位置：固定；top : 0；右： 0；底部： 0；左： 0；z指数： 1000；背景色-颜色： #2F2F2F}节点复制代码代码如下： img id=' progress mgage ' class=' progress ' style=' display : none ' alt=' src=' http :/Ajax-loader。gif '/div id=' maskOfProgressImage ' class=' mask ' style=' display : none '/div js复制代码代码如下： p/ppvar img=$(' # progressive mgage ')；var mask=$(' # maskOfProgressImage ')；/p复制代码代码如下： $.ajax({ url:url，type:'post '，dataType:'json '，data:data，before send :函数(xhr){ img。show().css({ 'position': 'fixed '，' top': '40% '，' left': '45% '，' margin-top ' : function(){ return-1 * img。高度()/2；}、“左边距-左”:函数(){ return-1 * img。width()/2；} });mask.show().css(“”不透明度',' 0.1 ');}，成功：函数(result){ doSuccess()}，完成：函数(xhr){ img。hide()；面具。hide()；} });