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

<br>.progress{z-index: 2000} <br>.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #2F2F2F} <br> <br>节点 <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><img id="progressImgage" class="progress" style="display:none" alt="" src="/ajax-loader.gif"/> <br><div id="maskOfProgressImage" class="mask" style="display:none"></div> <br> <br>js <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><p> </p><p>var img = $("#progressImgage"); <br>var mask = $("#maskOfProgressImage");</p> <br> <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>$.ajax({ <br>url:url, <br>type:"post", <br>dataType:"json", <br>data:data, <br>beforeSend:function(xhr){ <br>img.show().css({ <br>"position": "fixed", <br>"top": "40%", <br>"left": "45%", <br>"margin-top": function () { return -1 * img.height() / 2; }, <br>"margin-left": function () { return -1 * img.width() / 2; } <br>}); <br>mask.show().css("opacity", "0.1"); <br>}, <br>success:function(result){ <br>doSuccess() <br>}, <br>complete:function(xhr){ <br>img.hide(); <br>mask.hide(); <br><br>} <br>}); <br></li><li>            </li><li>                                </li></ol></pre></li></ol></pre></li></ol></pre>