Ajax可视化测试接口工具

时间：2024-03-25 07:54:15

源代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿贾克斯</title>
    <script src="../js/jquery.min.js"></script>
    <style>
        body {
            font-family: 华文楷体;
        }
        .outter{
            margin: 5% 40%;
            background: sandybrown;
            color:#ffffff;
            width: 350px;
            height: 280px;
        }
        .center{
            margin-left:25%;
        }
        .contentList{
            margin-left:15px;
            padding-right:10px;
        }
        .row{
            margin-top: 5px;
            width: 100%;
        }
        input{
            position: absolute;
            left: 48%;
        }
        select{
            position: absolute;
            left: 48%;
        }
    </style>
</head>
<body>

<div id="outter" class="outter">
    <h2 class="center">阿贾克斯Ajax</h2>
    <label style="margin-left: 70%; font-family: 华文行楷">made by jayce</label>
    <div class="row"><label class="contentList">站点:</label><input id="urlR" title="Input RequestUrl" value="http://10.0.1.46:8080/weChatKitchen/website"/></div>
    <div class="row"><label class="contentList">接口:</label><input id="urlS" title="Input RequestUrl" value="/showStatus"/></div>

    <div class="row">
    <label class="contentList">Type:</label>
    <select id="type" title="Select RequestType">
        <option value ="get">get</option>
        <option value ="post">post</option>
    </select>
    </div>

    <div class="row"><label class="contentList">Data:</label><input id="data" title="Input Data" value="{modulesId:1}"></div>

    <div class="row">
        <label class="contentList">DataType:</label>
        <select id="datatype" title="Select DataType">
            <option value ="json">json</option>
            <option value ="jsonp">jsonp</option>
            <option value ="text">text</option>
        </select>
    </div>

    <div class="row"><label class="contentList">successAlert:</label><input id="successalert" title="Input successAlert" value="succcess"/></div>

    <div class="row"><label class="contentList">errorAlert:</label><input id="erroralert" title="Input errorAlert" value="error" /></div>

    <div style="margin-top:10px"><input type="button" style=" margin-left:10%; background: lightskyblue; font-size: 20px;color: white" value="连接测试" id="bt"/></div>
</div>
<script>
    $("#bt").click(
        function () {
            var url=document.getElementById("urlR").value+document.getElementById("urlS").value;
            var type=document.getElementById("type").value;
            var data=document.getElementById("data").value;
            var datatype=document.getElementById("datatype").value;
            var successalert=document.getElementById("successalert").value;
            var erroralert=document.getElementById("erroralert").value;

            ajax(url,type,data,datatype,successalert,erroralert);

        }
    );

    function  ajax(url,type,data,dataType,successAlert,errorAlert) {

        alert(url+"--"+type+"--"+data+"--"+dataType+"--"+successAlert+"--"+errorAlert);
        var result=eval('(' + data + ')');//Javascript
        $.ajax({
            url:url,//此处换成你的服务端地址
            type:type,
            data:result,
            dataType:dataType,//jsonp 实现跨域
            //jsonpCallback:"fun",//服务器返回执行的方法名
            success:function (data) {
                alert(data.message);
                alert(successAlert);
            },
            error:function (err) {
                alert(err.message)
                alert(errorAlert);
            }
        });
    }
</script>
</body>
</html>

界面截图

Ajax可视化测试接口工具

相关文章