/** * amWiki Web端 - 简单 ajax 测试模块 * @author Tevin * * @notice 仅当页面存在“请求地址”、“请求类型”、“请求参数”三个h3标题时触发,且参数列表表格顺序不能打乱 */ (function (win, $) { 'use strict'; /** * 建接口测试 * @constructor */ var Testing = function () { //缓存元素 this.$e = { win: $(win), //测试面板 testingBox: $('#testingBox'), //md文档渲染处 view: $('#view'), //上一篇下一篇切换 sibling: $('#mainSibling'), //面板显示隐藏按钮 testingShow: null, //参数列表的容器 testingParam: $('#testingParam') }; //缓存数据 this._data = { //全局参数列队 globalParams: [], //全局参数是否生效 globalParamWorking: true, //单条参数模板 paramTemplate: $('#template\\:formList').text() }; //请求数据 this._request = { //请求地址 url: '', //请求类型 method: '', //请求参数 params: [], //全局参数 paramGlobal: [] }; this._useGlobalParam(); this._bindPanelCtrl(); this._bindAjaxSend(); }; /** * 抓取请求内容,抓取成功才显示按钮 * @public */ Testing.prototype.crawlContent = function () { var that = this; var testingReqState = [false, false, false]; this.$e.testingShow.removeClass('show'); this.$e.view.find('h3').each(function () { var $this = $(this); var name = $.trim($this.text()); //抓取请求地址 if (name == '请求地址' && !testingReqState[0]) { that._request.url = $.trim($this.next().text()); if (that._request.url.indexOf('http') < 0) { if (that._request.url.indexOf('/') == 0) { that._request.url = 'http://' + location.host + that._request.url; } else { that._request.url = 'http://' + location.host + '/' + that._request.url; } } testingReqState[0] = true; } //抓取请求类型 else if (name == '请求类型' && !testingReqState[1]) { that._request.method = $.trim($this.next().text()).toUpperCase(); var methodState = false; ['GET', 'POST', 'PUT', 'DELETE'].forEach(function (value, index) { if (that._request.method == value) { methodState = true; } }); if (!methodState) { that._request.method = 'POST'; } testingReqState[1] = true; } //抓取请求参数 else if (name == '请求参数' && !testingReqState[2]) { //清空参数列表 that._request.params.length = 0; //不存在table直接无参数,存在table时开始解析 if ($this.next('table').length > 0) { $this.next('table').find('tbody').find('tr').each(function () { var $tds = $(this).find('td'); //抓取内容 var param = { keyName: $tds.eq(0).text().replace(/^\s+|\s+$/g, ''), valueType: $tds.eq(1).text().replace(/^\s+|\s+$/g, ''), required: $tds.eq(2).text().replace(/^\s+|\s+$/g, ''), describe: $tds.eq(3).text().replace(/^\s+|\s+$/g, ''), default: $tds.eq(4).text().replace(/^\s+|\s+$/g, ''), reference: $tds.eq(5).text().replace(/^\s+|\s+$/g, '') }; //修正请求参数,正确键名才添加参数 if (param.keyName != '无' && param.keyName != '-' && param.keyName != '') { //“必填”转换 if (param.required == '是' || param.required == '必填' || param.required == 'yes' || param.required == 'true') { param.required = 'required'; } else { param.required = ''; } //“默认值”转换 if (param.default == '-' || param.default == '无' || param.default == 'Null' || param.default == 'null') { if (param.reference && param.reference != '-' && param.reference != '无' && param.reference != 'Null' && param.reference != 'null') { param.default = param.reference; } else { param.default = ''; } } that._request.params.push(param); } }); } testingReqState[2] = true; } }); if (testingReqState[0] && testingReqState[1] && testingReqState[2]) { this._initPanel(); } else { this._offPanel(); } testingReqState = [false, false, false]; }; /** * 关闭测试面板 * @private */ Testing.prototype._offPanel = function () { this.$e.testingShow.removeClass('show'); if (this.$e.testingShow.hasClass('on')) { this.displayBox('off'); } //清除抓取参数 this._request.url = ''; this._request.method = ''; this._request.params = []; //清空请求地址 $('#testingSendUrl').val(''); //还原请求类型 $('#testingSendType').find('option[value="POST"]').prop('selected', true); //清空参数列表 this.$e.testingParam.html(''); //重置iframe $('#testingResponse')[0].contentWindow.location.reload(); }; /** * 测试面板填充数据 * @private */ Testing.prototype._initPanel = function () { this.$e.testingShow.addClass('show'); //填充请求地址 $('#testingSendUrl').val(this._request.url); //填充请求类型 $('#testingSendType').find('option[value="' + this._request.method + '"]').prop('selected', true); //清空现有参数列表 this.$e.testingParam.html(''); //填充参数列表 if (this._request.params.length > 0) { var paramsHTML = ''; for (var i = 0; i < this._request.params.length; i++) { paramsHTML += this._data.paramTemplate .replace('{{describe}}', this._request.params[i].describe) .replace('{{keyName}}', this._request.params[i].keyName) .replace('{{default}}', this._request.params[i].default) .replace('{{valueType}}', this._request.params[i].valueType) .replace('{{required}}', this._request.params[i].required); } this.$e.testingParam.append(paramsHTML); } else { this.$e.testingParam.append('
';
//json格式化输出
$frameBody.find('pre').text(win.tools.formatJson(data));
} else {
$frameBody[0].innerHTML = data.replace(//, '');
}
setTimeout(function () {
$(frame).height($frameBody.height());
}, 100);
},
error: function (xhr, textStatus) {
$loading.hide();
$duration.text('耗时:' + parseFloat(Date.now() - startTime).toLocaleString() + ' ms');
var $frameBody = $(frame.contentWindow.document).find('body');
$frameBody.css('wordBreak', 'break-all');
var html = 'HTTP Status: ' +
xhr.status + ' ' + xhr.statusText + '';
//根据readyState简单判断跨域
if (xhr.readyState == 0) {
html += '请求未发送!可能是因为:' +
'' +
'- 请求了跨域地址
' +
'- 接口被302重定向到跨域地址
' +
'- 其他原因
' +
'
';
$frameBody[0].innerHTML = html;
}
//不跨域且为json
else if (/^\s*\{[\s\S]*\}\s*$/.test(xhr.responseText)) {
html += '';
$frameBody[0].innerHTML = html;
//json格式化输出
$frameBody.find('pre').text(win.tools.formatJson(xhr.responseText));
}
//其他不跨域
else {
html += xhr.responseText.replace(//, '');
$frameBody[0].innerHTML = html;
}
setTimeout(function () {
$(frame).height($frameBody.height());
}, 100);
}
});
});
};
/**
* 判断测试面板是否处于打开状态
* @returns {Boolean}
* @public
*/
Testing.prototype.isOpen = function () {
return this.$e.testingShow.hasClass('on');
};
return win.AWTesting = Testing;
})(window, jQuery);