JavaScript小工具之数据页面脚本

目前只代码。以后补全
主要是给开发与测试一个数据输入的页面。简单，容易编写。
1，数据节点的添加
2，数据自动化获得
3，请求自动化封装
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!--<link href="SimulationOrder.css" rel="stylesheet">-->
    <style type="text/css">

        /*.name{*/

            /*width: 100px;*/
            /*text-align: right;*/
        /*}*/

        table{
            padding: 10px;
        }
        #lock{
            padding: 20px;
        }

        #user{
            padding: 20px;
            display: none;
        }

        #unLock{
            padding: 20px;
            display: none;
        }

        .product{
            /*padding: 10px;*/
        }

        .desr{
            /*margin-top: 30px;*/

            height: 40px;

        }

    </style>


    <script>

        var baseUrl = "";//接口地址

        //选择要测试的功能
        function chageRadio(index){
//           this.checked =  'checked';
            if(index ==1)
            {
                $("#lock").css("display","block");
                $("#user").css("display","none");
                $("#unLock").css("display","none");
            }
            if(index ==2){

                $("#lock").css("display","none");
                $("#user").css("display","block");
                $("#unLock").css("display","none");
            }
            if(index ==3){
                $("#lock").css("display","none");
                $("#user").css("display","none");
                $("#unLock").css("display","block");

            }
        }

        //提交上锁请求
        function submitLockTest(){

            $("#contentText").innerHTML='网络或服务异常';
            var postData= getPare('#contentLock',['couponCode', 'productActivityRequest']);;
//            var data = JSON.stringify(postData);
//            var data = '{"appId":100000034,"couponId":11,"receiveUser":"12314432413"}';


            $.ajax({
                type : "POST",
                url: baseUrl+"/lock",
                dataType: "json",
                data: postData,
                //mimeType : "application/json",
                headers: {'Content-Type': 'application/json'},
                success: function(msg){
                    console.log(msg);


                   var jsondata= JSON.stringify(postData);
                    $("#contentText").html(jsondata);

                },
                error:function(XMLHttpRequest, textStatus, errorThrown){

                    console.log('网络或服务异常');
                    $("#contentText").html('提交上锁请求异常');
                }

            });

        }

        //提交支付成功请求
        function submitUserTest(){

            var postData= getPare('#user',['couponCode']);;

            $.ajax({
                type : "POST",
                url: baseUrl+"user",
                dataType: "json",
                data: postData,
                //mimeType : "application/json",
                headers: {'Content-Type': 'application/json'},
                success: function(msg){
                    console.log(msg);

                    var jsondata= JSON.stringify(postData);
                    $("#contentText").html(jsondata);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){

                    console.log('网络或服务异常');
                    $("#contentText").html('提交支付成功请求异常');
                }

            });
        }

        //提交解锁请求
        function submitUnLockTest(){


            var postData= getPare('#unLock',['couponCode']);;

            $.ajax({
                type : "POST",
                url: baseUrl+"unLock",
                dataType: "json",
                data: postData,
                //mimeType : "application/json",
                headers: {'Content-Type': 'application/json'},
                success: function(msg){
                    console.log(msg);


                    var jsondata= JSON.stringify(postData);
                    $("#contentText").html(jsondata);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown){

                    console.log('网络或服务异常');
                    $("#contentText").html('提交解锁请求异常');
                }

            });

        }

        var dingdan = $(".lock").html(),
                product = $(".productActivityRequest");
                zhifu = $(".user").html(),
                quxiao=$(".unLock").html();

        function addProduct(){
            product = $(".productActivityRequest").html();
            var coupon_item = document.createElement('div');
            coupon_item.className= 'productActivityRequest';
            coupon_item.innerHTML = product;
            $("#contentLock").append(coupon_item);
            $(".productActivityRequest").trigger("create");
        }




        function getPare( xuanze, clazz){
            var $root = $( xuanze);
            var object ;
            var array = $root.attr("name");
            if( typeof(array) == "undefined"){
                object = getArray($($root), clazz );
            }else{
                object = [];
                var length = $root.size();
                for(var i = 0 ; i< length ; i++){

                    object[i] = getArray( $( $($root[i]) ) , clazz );
                }
            }


            var json = JSON.stringify( object );


            console.log( json );
            return json;
        }

        function getArray( root , clazz ){
            var object = {};
            for(var ob in clazz){
                var keyName = clazz[ob];
                var clazzElenen = root.find( "."+keyName );

                var array = clazzElenen.attr("name");
                if( typeof(array) == "undefined"){
                    object[ keyName ] = getInt( clazzElenen );
                }else {
                    var values = [];
                    object[keyName] = values;
                    var length = clazzElenen.size();
                    for(var i = 0 ; i< length ; i++){
                        values[i] = getInt( $( clazzElenen[i] ) );
                    }
                }
            }
            return object;
        }

        function getInt( root ){
            var child = root.find(":text");
            var object = {};
            var length = child.size();
            for(var i = 0 ; i< length ; i++){
                var input = $( child[ i ] );
                var key   = input.attr("name");
                var value = input.val();
                object[ key ] = value;
            }

            return object;
        }

//        var htmlToAdd ="";
//
//        function addProduct(){
//            htmlToAdd = $(".product").html();
//            $("#lock").html($("#lock").html()+htmlToAdd);
//        }



    </script>
    <title></title>
</head>
<body>

<!--<button>订单提交（上锁）</button>-->
<!--<button>支付成功</button>-->
<!--<button>支付成功</button>-->
<form action="" method="get">
    选择您要测试的功能？<br /><br />
    <label><input name="Fruit" type="radio" value="订单提交" checked onchange="chageRadio(1)"/>订单提交</label>
    <label><input name="Fruit" type="radio" value="支付成功" onchange="chageRadio(2)"/>支付成功 </label>
    <label><input name="Fruit" type="radio" value="取消订单" onchange="chageRadio(3)"/>取消订单 </label>

</form>


<div id="lock">
    订单提交
    <div id="contentLock" name="array">
        <ul class="couponCode">
            <li class="desr">请输入优惠券信息  ［couponCode］</li>
            <li>
                <span class="name">
                    优惠券id ：
                </span>
                <input name="couponId" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    平台id ：
                </span>
                <input name="appId" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    订单id ：
                </span>
                <input name="costOrderNo" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    订单描述 ：
                </span>
                <input name="orderDescription" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    消费时间 ：
                </span>
                <input name="costTime" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    订单金额 ：
                </span>
                <input name="amount" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    使用金额 ：
                </span>
                <input name="costAmount" type="text" placeholder="">
            </li>
        </ul>
        <ul class="productActivityRequest" name="array">

            <li class="desr" >
                请输入产品信息  ［productActivityRequest］
            </li>
            <li>
                <span class="name">
                    平台id ：
                </span>
                <input name="appId" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    商铺id ：
                </span>
                <input name="shopsId" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    商铺名 ：
                </span>
                <input name="shopsName" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    商品id ：
                </span>
                <input name="productId" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    商品名 ：
                </span>
                <input name="productName" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                   金额 ：
                </span>
                <input name="price" type="text" placeholder="">
            </li>
            <li>
                <span class="name">
                    购买数据量 ：
                </span>
                <input name="num" type="text" placeholder="">
            </li>
        </ul>
    </div>
    <input type="button" value="增加一个产品" onclick="addProduct()"><br/>
    <input type="button" value="提交测试" onclick="submitLockTest()">
</div>
<div id="user" >
    支付成功
    <ul class="couponCode" name="array">
        <li class="desr" >请输入优惠券id数组  ［couponCode
            ］</li>
        <li>
            <span class="name">
                    优惠券id ：
            </span>
            <input name="id" type="text" placeholder="">
        </li>
    </ul>
    <input type="button" value="提交测试" onclick="submitUserTest()">
</div>

<div id="unLock">
    取消订单
    <ul class="couponCode" name="array">
        <li class="desr" >请输入优惠券id数组  ［couponCode］</li>
        <li>
                <span class="name">
                    优惠券id ：
                </span>
            <input name="id" type="text" placeholder="">
        </li>
    </ul>
    <input type="button" value="提交测试" onclick="submitUnLockTest()">
</div>

<p id="contentText"> hhhhhhhhhh</p>

</body>
</html>
JavaScript小工具之数据页面脚本

猜你喜欢
