您的位置：首页 > 运维架构 > Nginx

nginx+jquery+ajax搭建的qaweb游戏测试平台

2015-09-01 11:23 656 查看

做游戏服务器时经常要与客户端联调，但客户端程序不一定抽出空来。于是做了个web平台，直接去测试服务器功能。

下面是web界面的代码。由于自己只是业余学习web相关东西，代码可能比较丑陋。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>自动化测试平台</title>
<script src="jquery.js"> </script>
<style type="text/css">
body {
background-color: #C7EDCC;
}
</style>
<script type="text/javascript">
var total_amount = {
"line_func": 1,
"cmd_func": 1
}
function get_height()
{

}

function copy_line_func(btn)
{
var tr = $(btn).parents('tr');
tr.after(tr.clone(true));
total_amount["line_func"]++;
}

function copy_line_cmd(btn)
{
var tr = $(btn).parents('tr');
tr.after(tr.clone(true));
total_amount["cmd_func"]++;
}

function del_line_func(btn, type)
{
if ( total_amount[type] <= 1 )
{
alert("最后一个按钮不允许删除");
return;
}
var tr = $(btn).parents('tr');
tr.remove();
}

function mycommand(btn) {
var port = $("#port").val();
var action = $("#main_form").attr('action');
if ( port == "" )
{
alert("先输入端口");
return;
}
var ipt = $(btn).parents('tr');
var cmd = ipt.find(".typeahead").val();
if ( port == "" )
{
alert("没有数据啊，提交什么");
return;
}
var comment = ipt.find(".comment").val();

$("#loading").show();
$("#serverresult").hide();
var post_data = {
"port": port,
"cmd": cmd,
"comment": comment
};
$.ajax({
type: "POST",
//ip略去
url: "http://xx/hello",
data: post_data,
dataType: "text",
success: function(ret) {
$("#loading").hide();
$("#serverresult").show();
$("#serverresult").text("已收到指令请求，结果是:"+ret);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#loading").hide();
alert(XMLHttpRequest.readyState + "stata" + XMLHttpRequest.status + "tst"+XMLHttpRequest.responseText);
}
});

}

</script>

</head>

<body>

<div class="content">

<div class="crumb">
<h2>游戏测试工作台</span></h2>
</div>

<h3 class="blockTitle">执行指令 <a href="#" onclick="block();return false;">显示/隐藏</a></h3>

<div class="layout">

<form action="action_execute" method="POST" id='main_form' target="">
<table class="lay" cellpadding="5px" style="text-align:left;">
<tr class="all_port">
<td style="width: 7%;">输入端口:</td>
<td style="width: 55%;">
<div class="mymatch_port">
<input class="typeahead" id="port" name="port" maxlength="10" size="10" type="text">
</div>
</td>
<td style="width: 20%;">指令注释</td>
<td style="width: 15%;">
<input type="button" value="保存指令" onclick="sava_cmd_data()">
<input style="margin-left:10px" type="button" value="读取指令" onclick="get_cmd_data()">
</td>
</tr>
<tr class="all_func">
<td>
<label>调用函数:</label>
</td>
<td>
<div class="mymatch_func">
<input class="typeahead" type="text" style="border: 2px solid #99CCFF; width: 80%;"
id="command_auto" name="command" maxlength="1000"
command="true">
<input type="button" value="+" onclick="copy_line_func(this)">
<input type="button" value="-" onclick="del_line_func(this, 'line_func')">
</div>
</td>
<td><input type="text" style="width: 80%;" id="command_comment" maxlength="1000" class = "comment" command="true"></td>
<td><input type="button" value="调用" onclick="mycommand(this)"></td>
</tr>

<tr class="all_cmd">
<td>
<label>执行指令:</label>
</td>
<td>
<div class="mymatch_cmd">
<input class="typeahead" type="text" style="border: 2px solid #FFCCFF; width: 80%;"
id="command_auto2" name="command2"
maxlength="1000"
command="true">
<input type="button" value="+" onclick="copy_line_cmd(this)">
<input type="button" value="-" onclick="del_line_func(this, 'cmd_func' )">
</div>
</td>
<td><input type="text" style="width: 80%;" id="command2_comment" maxlength="1000" class="comment" command="true"></td>
<td><input type="button" value="执行" onclick="mycommand(this)"></td>
</tr>
</table>
</form>
</div>

<div id="result">
<h3 class="blockTitle">执行结果 <a href="#" onclick="full_screen();return false;">全屏/恢复</a></h3>
<img id="loading" src="res/loading.gif" title="正在执行指令，请稍候" style="margin-left:300px;display:none;"/>
<p id="serverresult"></p>
</div>

</div>
<!-- content  over-->

</body>
</html>

效果图:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航