Ajax Submit Load Progress bar sample code _ajax related

Realize the effect diagram


 


Loading Picture


 


Implementation mode:





add
to the JSP page




style

Copy Code code as follows:

. progress{z-index:2000}
. mask{position:fixed;top:0;right:0;bottom:0;left:0 z-index:1000; Background-color: #2F2F2F}

node

Copy Code code as follows:

<div id= "Maskofprogressimage" class= "Mask" style= "Display:none" ></div>

JS

Copy Code code as follows:

<p> </p><p>var img = $ ("#progressImgage");
var mask = $ ("#maskOfProgressImage");</p>

Copy Code code as follows:

$.ajax ({
Url:url,
Type: "Post",
DataType: "JSON",
Data:data,
Beforesend:function (XHR) {
Img.show (). CSS ({
"Position": "Fixed",
"Top": "40%",
"Left": "45%",
' Margin-top ': function () {return-1 * Img.height ()/2;},
' Margin-left ': function () {return-1 * Img.width ()/2;}
});
Mask.show (). CSS ("opacity", "0.1");
},
Success:function (Result) {
Dosuccess ()
},
Complete:function (XHR) {
Img.hide ();
Mask.hide ();

}
});