Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<script src= "Http://requirejs.org/docs/release/2.1.16/comments/require.js" ></script>
<script src= "Https://cdn.bootcss.com/jquery/1.4.3/jquery.js" ></script>
<TITLE>MOCKJS-A more complete use case </title>
<body>
<dvi class= "Data1" ></dvi>
<div class= "Data2" ></div>
<div class= "Data3" ></div>
</body>
<script>
Configure a Mock path
Require.config ({
Paths: {
Mock: ' Http://mockjs.com/dist/mock '
}
});
Load Mock
Require ([' mock '], function (mock) {
/* The first part is not related to the second part */
/* First part */
//Mock.mock (template)
//Data template
var data = Mock.mock ({
' list|4 ': [{
' id|+1 ': 1
}],
Name:Mock.Random.cname (),//randomly generates a Chinese name
Addr:Mock.mock (' @county (True) '),//randomly generates an address
' age|18-60 ': 1,// Randomly generate a number from 18 to
Birth:Mock.Random.date (),//randomly generate a date
Sex:Mock.Random.integer (0, 1),//randomly generate an integer, 0/1, according to this to give " Male "" Female "
Email:Mock.mock (' @EMAIL () '),//randomly generate a mailbox
' moblie|1 ': [' 13531544954 ', ' 13632250649 ', ' 15820292420 ', ' 15999905612 '],//randomly find an array of
' num1|1-100.2 ': 1,//1-100 randomly generate a reserved two-bit decimal point
' num2|100-300.2 ': 1,
' classroom|1 ': [' Fine language class ', ' fine work Class A ', ' English class ', ' language class '],
' from|1 ': [' to shop consulting ', ' Micro Shop ', ' one tutor ', ' Learning Service Platform '],
' status|1 ': [' strong consciousness ', ' forecast name ', ' intention general ', ' Temporarily unintentionally '],
time:Mock.Random.date (' Yyyy-mm-dd '),
mobile:/^1[0-9]{10}$///11-digit phone number
} with regular match 1;
//Print
$ (' <pre> '). Text (json.stringify (data, NULL, 4)). AppendTo ($ ('. Data1 '));
/* Part Two */
//Mock.mock (Rurl, template)
Mock.mock (/\.json/, {///match. json file
' list|1-10 ': [{//Data template, Randomly generate an array of objects
' id|+1 ': 1,//1 start, increment
' email ': ' @EMAIL ',
' regexp3 ':/\d{5,10}/
}]
});
$.ajax ({
URL: ' Hello.json ',//request to access JSON file, intercept Hello.json request, return data from mock data template
DataType: ' json ',
success:function (data, status, JQXHR) {
//Get data from the mock data template, print
$ (' <pre> '). Text (json.stringify (data, NULL, 4)). AppendTo ($ ('. Data2 '));
}
})
/* Third part */
var data3 =mock.mock (/\.json/, {///match. json file, can execute parameters matching success
' list|1-10 ': [{//Data template
' id|+1 ': 1 ,
' email ': ' @EMAIL ',
' regexp4 ':/\d{5,10}/,
' name ': Mock.Random.cname (),//randomly generate a Chinese name
}]
});
function SendData (URL) {
$.ajax ({
Url:url,
DataType: ' JSON ',
function (data3, status, JQXHR) {
Get data from a mock data template, print
$ (' <pre> '). Text (Json.stringify (data3, null,5)). AppendTo ($ ('. Data3 '));
}
})
}
SendData ("Hello.json"); Invoking a method to render the data
});
</script>
MOCKJS Syntax sugar use case
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
