在做webapi项目的时候 webapi为我们提供了help文档,开发者可以参考这个文档,但是这个文档缺少测试功能,如果加上一个测试的功能就更加方便了
于是就研究了下写了一段代码,代码比较简单,只要将这段代码贴在areashelppageviewshelpapi.cshtml中就可以了,如果多个api项目都依次加上,因为感觉比较实用就分享出来
如果你的接口不需要验证,请自行修改下代码,测试时可以复制文档中提供的参数格式进行修改
<div id="test"> <h4 class="sample-header">测试接口</h4> <div class="sample-content"> <span><b>Token:</b></span> <pre class="wrapped"> <textarea rows="2" cols="500" style="80%!important;max-none;" id="token"></textarea> </pre> <span><b>参数:</b></span> <pre class="wrapped"> <textarea rows="15" cols="500" style="80%!important;max-none;" id="data1"></textarea> </pre> <input class="sample-header" type="button" value="测试" onclick="ApiTest()" /><br /><br /> <span><b>响应:</b></span> <pre class="wrapped"> <textarea rows="5" cols="500" style="80%!important;max-none;" id="data2"></textarea> </pre> </div> <script src="~/Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function () {// dom元素加载完毕 //$('#data1').val($(".sample-content pre.wrapped").html()); }); function ApiTest() { $('#data2').val(""); var json = {}; if ($("#data1").val() != "") { json = eval("(" + $("#data1").val() + ")"); } $.ajax({ type: "@Model.ApiDescription.HttpMethod.Method", dataType: "json", url: "/@Model.ApiDescription.RelativePath.Split('?')[0]", data: json, xhrFields: { withCredentials: true }, crossDomain: true, success: function (results) { if (typeof results == "object") { $("#data2").val(JSON.stringify(results,null,2)); } else { var resultObj = JSON.parse(results); $("#data2").val(results); } //使用时,需要转换为Json对象 }, beforeSend: function (request) { request.setRequestHeader("Authorization", "bearer " + $('#token').val()); }, error: function (XMLHttpRequest, textStatus, errorThrown) { $("#data2").val(XMLHttpRequest.status + " " + XMLHttpRequest.responseText); } }); } </script> </div>