In the actual development process, the frontend and backend negotiate a unified interface and start their own tasks. At this time, I have such an Ajax request to obtain data from the background:
| The code is as follows: | Copy code |
| $. Ajax ({ Url: '/products /' }). Done (function (res ){ Certificate ('{result'}.html (res ); }); |
|
However, this service may not have been created yet. Maybe it's the guy who developed it in the background (that is, those who used PHP, Ruby ,. NET, GoldFusion, and other languages). Maybe he is busy with other things. In short, when this request is sent, I cannot get the expected result. I can only get a 404 (Not Found) error.
This is really bad, and it is useless to urge. The testers next to it are clamoring for testing, and I am eager to see immediate results. At this time, you can only rely on yourself. One of the better methods is to simulate Ajax requests. Here I use the jQuery Mockjax plug-in.
Address: jQuery Mockjax
This is a jQuery plug-in. It will be downloaded and referenced after jQuery:
| The code is as follows: | Copy code |
| <! DOCTYPE html> <Html> <Head> <Title> Test </title> </Head> <Body> <Div id = "result"> </div> <Script src = "http://code.jquery.com/jquery-1.11.1.min.js"> </script> <Script src = "vendor/jquery. mockjax. js"> </script> </Body> </Html> |
|
Then execute the code that simulates the request before the request code. Use the $. Mockjajax () method provided by the plug-in to temporarily specify two parameter URLs and responseText:
| The code is as follows: | Copy code |
| $. Mockjax ({ Url: '/products /', ResponseText: 'Here you are! ' }); |
|
It monitors Ajax requests with the same url and intercepts and simulates responses when requests are sent. The value of responseText is the simulated response content, so that my program can be executed happily, the running result of the first example is 'here you are ', which will be displayed in div # result. When I no longer need to simulate a request, I can clear it using the $. mockjax. clear () method:
| The code is as follows: | Copy code |
| $. Mockjax. clear (); | |
Once the background service development is complete, I can use this method to clear all simulated requests to experience the real request results. If you do not want to clear all the simulated requests at a time, but for a simulated request, you can pass in the ID of the simulated request. Each simulated request returns an ID value:
| The code is as follows: | Copy code |
Var idOne = $. mockjax ({}), $. Mockjax. clear (idTwo ); |
|
In this way, the second simulated request is cleared and the first request is retained.
Because the url address of the Ajax request must correspond to the url of the simulated request, it would be very painful if there are many requests on the page and every request is simulated. Fortunately, the url parameter of this plug-in provides a wildcard * method:
| The code is as follows: | Copy code |
| $. Mockjax ({ Url: '/books /*' }); |
|
In this way, in addition to matching requests whose url is/books/cook, more requests such as/books/math can also be matched. You can also use regular expressions to perform more complex matching modes:
| The code is as follows: | Copy code |
| $. Mockjax ({ Url:/^/data/(cook | math) $/I }); |
|
The data parameters of the plug-in can be used to execute different simulated responses based on different request data:
| The code is as follows: | Copy code |
$. Mockjax ({ $. Mockjax ({ |
|
Even if the request data of the same url address is different, the response content is different. In addition to plain text strings, the response content can also use json
Format string.
The plug-in also provides a default parameter setting object $. mockjaxSettings, which is used for unspecified parameters:
| The code is as follows: | Copy code |
| $. MockjaxSettings = { Logging: true, Status: 200, StatusText: "OK ", ResponseTime: 500, IsTimeout: false, ThrowUnmocked: false, ContentType: 'Text/plain ', Response :'', ResponseText :'', ResponseXML :'', Proxy :'', ProxyType: 'GET ', LastModified: null, Etag :'', Headers :{ Etag: 'ijf @ H # @ 923uf8023hFO @ I # H #', 'Content-type': 'Text/plain' } }; |
|
| The code is as follows: | Copy code |
After the default value is modified, all subsequent simulated requests use the modified value: $. MockjaxSettings. contentType = "application/json "; |
|
Only the default value of contentType is modified here.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
