Well, of course, I encapsulated the $.ajax. Request interface can be transmitted several times. Why don't we focus on the front end? I don't even know why I insisted on not saying the code.
JS file
$ajax. js
$(function(){/*** Ajax Encapsulation* URL to send the requested address* Data sent to the server, array storage, such as: {"username": "Zhang San", "Password": 123456}* Succcallback Successful callback function* Errorcallback Failure callback function* Type Request method ("post" or "GET"), set to "POST" by default* DataType expected Server to return the data type, commonly used such as: XML, HTML, JSON, text* Reference Jquery-1.7.1.js*/Insert Loadingvar html=""; Html+=' <div class= ' js_loading ' > '; Html+=' <div class= ' mask ></div> '; Html+=' <div class= ' loading ' > '; Html+=' <span></span> '; Html+=' </div> '; Html+=' </div> ';$("Body").Append (HTML);function $ajax(Url,PostData,Succcallback,Errorcallback,Type,DataType){var type= Type||"POST";var dataType= DataType||"JSON";$.Ajax{Type: type,Url: URL,Data: PostData,DataType: DataType,Beforesend:function(){Start loading$(". Js_loading").Show ();},Success:function(Res{IfRes.Success{if (Succcallback){succcallback (res) } }else{ if (errorcallback) {errorcallback (res) } } }, complete: function ( ) {//End loading $ (". Js_loading"). Remove (); $ (". js_loading"). Hide (); }); } });
is not a glance to understand so easy don't think that the interviewer out of the problem is how hard just to have reaction come over
Okay, so the next step is to call
<! DOCTYPEHtml><Html><Head><Meta charset="UTF-8"><Meta Name="Viewport" Content="Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no"><Title>ajax Re-encapsulation</Title><Style>. js_loading{DisplayNone;}. Mask{BackgroundRgba255,255,255,0);PositionFixed;Left0;Top0;Width100%;Height100%;Z-index:1;}. Loading{PositionFixed;Left0;Top0;Width100%;Height100%;Z-index:2;DisplayBox;Box-pack:Center;Box-align:Center;Display-webkit-box;-webkit-box-pack:Center;-webkit-box-align:Center;} . Loading span{display:block;background: #333; width:40px;height:40px;border-radius:3px; Text-align:center;}. Loading img{width:26px;margin-top:7px;} </style><script src= "Jquery-1.7.1.js" ></script>
And there is the requested page test.asp
{ "success":true, "firstName":"获取成功!!!", "lastName":"哈哈...", "fail":"获取失败!!!"}
Try it yourself. It's not a problem to write this kind of method.
Shut down and sleep.
---restore content ends---
Of course
$.ajax in jquery two times in a package that makes multiple calls today, I think about it all day.