新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

然后比较在【引入jquery-mockjax】

1. 原理

jquery-mockjax是用以mock 前台ajax向后台央浼的回来数据。

规律相当粗略

在你js代码要发送ajax乞求的地点断点一下,然后相比在【引进jquery-mockjax】 和 【未有引进jquery-mockjax】的景况下$.ajax.toString()的值景况。

很醒目,引进jquery-mockjax时,那几个mock库会对jquery提供的ajax函数做替换。那样就很轻巧能mock起来。

在其实的支付进度中,前端后台协商好了统一的接口,就分别早先和气的任务了。那时候笔者有这么贰个Ajax 须要必要从后台获取数据:

$.ajax({
url: '/products/'
}).done(function(res) {
$('#result').html(res);
}); 

而是那个服务可能还尚无开创,可能是后台开荒那多少个小兄弟(正是那个运用 PHP、Ruby、.NET、GoldFusion 等等语言的帅男子)开小差去了,或然是他不怕路途遥远其余职业。不问可知,当这么些乞请发出的时候本人不能够得到小编想要的结果,小编不得不获取一个404 (Not Found) 错误。

那实质上是比相当糟糕,催促也从没用,旁边的测验职员吵着闹着要测量试验呢,而小编要好也热切希望看到立竿见影的意义。今年,就只能依赖自身了,个中叁个比较好的章程便是模拟 Ajax 央浼,这里笔者使用 jQuery Mockjax 插件。

地址:jQuery Mockjax

那是多个 jQuery 插件,将其下载下来引用的时候放在 jQuery 之后:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="result"></div>
<script src="http://www.xqwebs.com/uploads/allimg/190713/2211252a7-0.jpg"></script>
<script src="vendor/jquery.mockjax.js"></script>
</body>
</html> 

接下来在伸手代码以前施行模拟央浼的代码,使用该插件提供的 $.mockjax() 方法,一时先钦赐2个参数 url 和 responseText:

$.mockjax({
url: '/products/',
responseText: 'Here you are!'
}); 

它会监测具有同样 url 的 Ajax 伏乞并在央求发出时挡住同一时候效仿响应,responseText 的值正是模仿的响应内容,那样自身的次序就能够欢悦地实行了,最先导特别例子的周转结果正是'Here you are' 这段内容将会显示到 div#result 中。当自个儿不再需求效法央求的时候能够应用 $.mockjax.clear() 方法清除掉:

$.mockjax.clear();

一旦后台服务付出形成,小编就足以选拔该形式清除掉全体模拟必要体验真正的央求效果了。纵然不期望一次性清除掉全体的模拟央求,而是本着某些模拟央浼,能够流传该模拟乞求的 ID,每一种模仿供给都会重回二个 ID 值:

var idOne = $.mockjax({ }),
idTwo = $.mockjax({ });
$.mockjax.clear(idTwo); 

与此相类似就把第3个模拟需要解除掉了,保留了第叁个。

鉴于 Ajax 供给的 url 地址要和效仿央求的 url 对应,借使页面上有相当多呼吁,各类央求都去模拟的话就能倍感非常惨重,幸好,该插件的 url 参数提供了一个通配符 * 方式:

$.mockjax({
url: '/books/*'
}); 

诸如此比除了能够相配 url 地址为 /books/cook 的哀求还足以包容地址为 /books/math 等等更加多伏乞,乃至还是能够选取正则表达式进行更头昏眼花的合作形式:

$.mockjax({
url: /^/data/(cook|math)$/i
}); 

利用插件的 data 参数能够依附不相同的呼吁数据实行差异的模仿响应:

$.mockjax({
url: '/books/',
data: {
type: 'cook'
},
responseText: 'You want a cook book!'
});
$.mockjax({
url: '/books/',
data: {
type: 'math'
},
responseText: {
"content": "You want a math book!"
}
}); 

就到底同一个 url 地址当呼吁的数据分裂的时候猎取的响应内容也区别样。响应内容除了纯文本字符串,也得以选择json
格式的字符串。

该插件还提供了多少个私下认可参数设置对象 $.mockjaxSettings,未有一点名的参数都将运用那几个暗许值:

$.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'
}
}; 

将暗许值修改以往,前边的模拟须求都会使用修改后的值:

$.mockjaxSettings.contentType = "application/json"; 

此间只修改了中间的 contentType 的默许值。

如上所述通超过实际例详解jQuery Mockjax 插件模拟 Ajax 诉求的有关文化,希望对我们全数扶助。

你只怕感兴趣的小说:

  • jQuery中依据deferred来呼吁及推断AJAX加载的实例解说
  • jQuery通过deferred对象管理ajax异步
  • Jquery ajax乞求导出Excel表格的兑当代码
  • jQuery ajax供给重临list数据动态生成input标签,并把list数据赋值到input标签
  • 浅析jQuery Ajax乞请参数和再次回到数据的管理
  • js与jQuery终止正在发送的ajax央求的章程
  • jQuery使用deferreds串行多少个ajax央浼

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:然后比较在【引入jquery-mockjax】

您可能还会对下面的文章感兴趣: