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

来源：互联网发布：无法解析主机ubuntu 编辑：程序博客网时间：2024/05/24 04:22
做游戏服务器时经常要与客户端联调，但客户端程序不一定抽出空来。于是做了个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>
效果图:
0 0