フロントエンドデータはバックグラウンドと分離され、mockjsアナログバックグラウンドを使ってjsonデータに戻ります.
6176 ワード
萼萼葃はバックエンドから帰るJSONデータに依存しないで、バックグラウンドより一歩早く退勤します.
mockjsを使って、jsonデータを作った例:効果:
操作して、mockjsをクリックしてランダムにjsonデータを生成します.コード:
mockjsを使って、jsonデータを作った例:効果:
操作して、mockjsをクリックしてランダムにjsonデータを生成します.コード:
<meta charset="<span" class="hljs-string"/>"utf-8">
<div>
<h1 id="<span" class="hljs-string">"mockjs">mockjs</h1>
</div>
<script src="<span" class="hljs-string">"http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"</span>></script>
<script src="<span" class="hljs-string">"http://mockjs.com/dist/mock.js"</span>></script>
<script class="hljs-built_in">type</span>=<span class="hljs-string">"text/javascript"</span>>
// mock
Mock.mock(
<span class="hljs-string">'http://mockjs'</span>, {
<span class="hljs-string">"userName"</span>: <span class="hljs-string">'@name'</span>, //
<span class="hljs-string">"age|1-100"</span>: 100, // (1-100)
<span class="hljs-string">"color"</span>: <span class="hljs-string">"@color"</span>, //
<span class="hljs-string">"date"</span>: <span class="hljs-string">"@date('yyyy-MM-dd')"</span>, //
<span class="hljs-string">"url"</span>: <span class="hljs-string">"@url()"</span>, // url
<span class="hljs-string">"content"</span>: <span class="hljs-string">"@cparagraph()"</span> //
}
);
//ajax
$(<span class="hljs-string">"#mockjs"</span>).click(<span class="hljs-function"><span class="hljs-title">function</span></span>() {
$.ajax({
url: <span class="hljs-string">"http://mockjs"</span>, // url
dataType: <span class="hljs-string">"json"</span>, // json
async: <span class="hljs-literal">true</span>, // ， ， ajax
data: {}, //
<span class="hljs-built_in">type</span>: <span class="hljs-string">"GET"</span>, //
beforeSend: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
//
console.log(<span class="hljs-string">'start'</span>);
},
success: <span class="hljs-keyword">function</span>(req) {
//
console.log(req);
},
complete: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
//
console.log(<span class="hljs-string">'end'</span>);
},
error: <span class="hljs-keyword">function</span>(err) {
//
console.log(err);
}
});
});
</script>
<span class="copy-code-btn"></span></code></pre>
<p> api ？ </p>
<pre><code>Mock.mock(
<span class="hljs-string">'http://getJSON'</span>, {
<span class="hljs-string">"userName"</span>: <span class="hljs-string">'@name'</span>, //
<span class="hljs-string">"age|1-100"</span>: 100, // (1-100)
}
);
<span class="copy-code-btn"></span></code></pre>
<p> ：</p>
<pre><code> $(<span class="hljs-string">"#getJSON"</span>).click(<span class="hljs-function"><span class="hljs-title">function</span></span>() {
$.ajax({
url: <span class="hljs-string">"http://getJSON"</span>, // url
dataType: <span class="hljs-string">"json"</span>, // json
async: <span class="hljs-literal">true</span>, // ， ， ajax
data: {}, //
<span class="hljs-built_in">type</span>: <span class="hljs-string">"GET"</span>, //
beforeSend: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
//
console.log(<span class="hljs-string">'start'</span>);
},
success: <span class="hljs-keyword">function</span>(req) {
//
console.log(req);
},
complete: <span class="hljs-function"><span class="hljs-title">function</span></span>() {
//
console.log(<span class="hljs-string">'end'</span>);
},
error: <span class="hljs-keyword">function</span>(err) {
//
console.log(err);
}
});
});
<span class="copy-code-btn"></span></code></pre>
</div>
<p> :https://juejin.im/post/5a3217bff265da43252950e4</p>
</div>
</div>
</div>
</div>