jQuery+js+ajax用接口添加数据

深碍√TFBOYSˉ_ 2022-06-04 07:13 116阅读 0赞

<!DOCTYPE html>  
<html xmlns:th="http://www.thymeleaf.org">  
  
  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Document</title><script src="jquery-3.0.0.min.js"></script>  
    
  
  
    <style>  
        .container \{  
            width: 800px;  
            height: 600px;  
            border: 2px solid \#000;  
        \}  
          
        .grade-list span \{  
            display: block;  
            width: 20px;  
            height: 20px;  
            border: 1px solid \#000;  
            float: left;  
        \}  
          
        .biao span \{  
            display: block;  
            width: 20px;  
            height: 20px;  
            border: 1px solid \#000;  
            float: left;  
        \}  
          
        .grade-list \{  
            height: 40px;  
            border-bottom: 1px solid \#999;  
            margin-bottom: 20px;  
            margin-top: 20px;  
        \}  
          
        .label\_btn \{  
            float: left;  
            margin-right: 10px;  
        \}  
          
        .idd \{  
            display: block;  
            width: 20px;  
            height: 20px;  
            float: left;  
            border: 1px solid \#000;  
            margin-right: 3px;  
        \}  
          
        label \{  
            font-size: 14px;  
        \}  
          
        .grade-list label \{  
            display: block;  
            float: left;  
        \}  
          
        .clearfix::after \{  
            content: '';  
            height: 0;  
            display: block;  
            visibility: hidden;  
            clear: both;  
        \}  
          
        .clearfixbiao::after \{  
            content: '';  
            height: 0;  
            display: block;  
            visibility: hidden;  
            clear: both;  
        \}  
          
        \#selectOption \{  
            margin-left: 20px;  
        \}  
          
        \#selectOption option \{  
            height: 22px;  
        \}  
          
        \#begin,  
        \#end \{  
            width: 150px;  
            height: 22px;  
            line-height: 22px;  
        \}  
          
        .butActive \{  
            background: violet;  
        \}  
          
        .butActivebiao \{  
            background: violet;  
        \}  
          
        .main \{  
            font-size: 120%;  
            color: red;  
        \}  
          
        .indexBtn \{  
            border: none;  
            outline: none;  
            width: 100px;  
            height: 30px;  
            background: darkcyan;  
            color: \#fff;  
            cursor: pointer;  
            float: right;  
            margin-right: 20px;  
        \}  
          
        .indexBtn:hover \{  
            background: \#067171;  
        \}  
          
        .second\_box \{  
            position: relative;  
        \}  
          
        .indexCont \{  
            width: 350px;  
            height: 260px;  
            background: \#fafafa;  
            position: absolute;  
            right: 20px;  
            top: 30px;  
            border: 1px solid \#ccc;  
            display: none;  
        \}  
          
        .indexConWrap \{  
            width: 330px;  
            height: 240px;  
            background: \#fff;  
            box-sizing: border-box;  
            margin: 10px;  
            overflow-y: auto;  
        \}  
          
        .btnWrap \{  
            float: right;  
        \}  
          
        .btnWrap:hover .indexCont \{  
            display: block;  
        \}  
          
        .label\_biao \{  
            float: left;  
            margin-right: 16px;  
            margin-bottom: 10px;  
        \}  
        \#rui\{  
        width: 800px;  
    height: 600px;  
    border: 2px solid \#000;  
        position: absolute;  
    top: 8px;  
    left: 810px;  
        \}  
           \#liu\{  
        width: 800px;  
    height: 600px;  
    border: 2px solid \#000;  
    
        \}  
          
                \#guang\{  
        width: 800px;  
    height: 600px;  
    border: 2px solid \#000;  
         position: absolute;  
    top: 408px;  
    left: 810px;  
    
        \}  
        body \{font-family: "Lato", sans-serif;\}  
  
  
/\* Style the tab \*/  
div.tab \{  
    overflow: hidden;  
    border: 1px solid \#ccc;  
    background-color: \#f1f1f1;  
\}  
  
  
/\* Style the buttons inside the tab \*/  
div.tab button \{  
    background-color: inherit;  
    float: left;  
    border: none;  
    outline: none;  
    cursor: pointer;  
    padding: 14px 16px;  
    transition: 0.3s;  
    font-size: 17px;  
\}  
  
  
/\* Change background color of buttons on hover \*/  
div.tab button:hover \{  
    background-color: \#ddd;  
\}  
  
  
/\* Create an active/current tablink class \*/  
div.tab button.active \{  
    background-color: \#ccc;  
\}  
  
  
/\* Style the tab content \*/  
.tabcontent \{  
    display: none;  
    padding: 6px 12px;  
    -webkit-animation: fadeEffect 1s;  
    animation: fadeEffect 1s;  
\}  
  
  
/\* Fade in tabs \*/  
@-webkit-keyframes fadeEffect \{  
    from \{opacity: 0;\}  
    to \{opacity: 1;\}  
\}  
  
  
@keyframes fadeEffect \{  
    from \{opacity: 0;\}  
    to \{opacity: 1;\}  
\}  
    </style>  
</head>  
  
  
<body>  
    <div class="container">  
  
  
          
        <div class="grade-list clearfix" id="tel">  
         <div class="label\_btn clearfix"><span id="50023643" class="cc"></span><label>棒球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50005900" class="cc"></span><label>足球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50023643" class="cc"></span><label>球鞋</label></div>  
        <div class="label\_btn clearfix"><span id="50005900" class="cc"></span><label>女生上衣</label></div>  
        <div class="label\_btn clearfix"><span id="125612007" class="cc"></span><label>男生上衣</label></div>  
        <div class="label\_btn clearfix"><span id="125612008" class="cc"></span><label>毛巾</label></div>  
        <div class="label\_btn clearfix"><span id="125612009" class="cc"></span><label>鸭翅</label></div>  
            
            <button class="indexBtn" id="loadBtn">加载</button>  
        </div>  
  
  
          
        <div class="second\_box">  
            <label>开始时间:</label> <input type="text" id="begin" placeholder="开始时间" value=""> --  
            <label>结束时间:</label> <input type="text" id="end" placeholder="结束时间" value="">  
  
  
              
            <select id="selectOption">  
<option>类目属性</option>  
<option>活跃店铺</option>  
<option>宝贝</option>  
</select>  
  
  
              
            <div class="btnWrap">  
                <button class="indexBtn" id="index">指标</button>  
                <div class="indexCont">  
                    <div class="indexConWrap" id="indexConWrap">  
  
  
                    </div>  
                </div>  
            </div>  
        </div>  
  
  
        <div class="biao">  
        </div>  
        <table border="1" style="border:1px solid red; ">  
            <thead id="tr">  
            </thead>  
            <tbody id="body">  
            </tbody>  
        </table>   
    </div>  
      
    <div id="rui">  
    <button  class="indexBtn" id="inclick">点击事件  
    </button>  
    <div id="css3"></div>  
     <table border="1">  
        <thead id="tr1">  
        
        </thead>  
        <tbody id="body1">  
          
        </tbody>      
        </table>  
      
      
    </div>  
      
    <div id="liu">  
  
  
<div class="tab">  
  <button class="tablinks" οnclick="openCity(event, 'London')">类目属性</button>  
  <button class="tablinks" οnclick="openCity(event, 'Paris')">活跃店铺</button>  
  <button class="tablinks" οnclick="openCity(event, 'Tokyo')">宝贝</button>  
</div>  
  
  
<div id="London" class="tabcontent">  
   <table border="1">  
        <thead id="tr2">  
        </thead>  
        <tbody id="body2">  
       
        </tbody>      
        </table>  
</div>  
  
  
<div id="Paris" class="tabcontent">  
  <table border="1">  
        <thead id="tr3">  
        </thead>  
        <tbody id="body3">  
       
        </tbody>      
        </table>  
</div>  
  
  
<div id="Tokyo" class="tabcontent">  
  <table border="1">  
        <thead id="tr4">  
        </thead>  
        <tbody id="body4">  
       
        </tbody>      
        </table>  
</div>  
    </div>  
    <div id="gunag">  
      
      
      
    </div>  
      
    <script type="text/javascript">  
     var oldTime = (new Date("2012/12/25 20:11:11")).getTime(); //得到毫秒数    
var newTime = new Date(oldTime); //就得到普通的时间了   
console.log("newTime==>"+newTime);  
        //切换选择项  
        $(".label\_btn>span").click(function() \{  
            toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。  
            $(this).toggleClass("butActive");  
        \});  
  
  
        function index(param) \{  
            $.ajax(\{  
                url: "http://211.95.60.40:16868/yanshudemo/shop",  
                type: "post",  
                data: \{  
                    type: param  
                \},  
                dataType: "json",  
                success: function(data) \{  
                    console.log(data.columns.length);  
                    var str = "";  
                    for (var i = 0; i < data.columns.length; i++) \{  
                        //英文转汉文   
                        str += "  <div class='label\_biao clearfixbiao'> <span class=\\"idd\\" id=" + data.columns\[i\] + " ></span><label>" + data.columns\[i\] + "</label>   </div>";  
                    \}  
                    $("\#indexConWrap").html(str);  
  
  
                    //切换选择项  
                    var label = $(".label\_biao");  
                    for (var i = 0; i < label.length; i++) \{  
                        $(".label\_biao").eq(i).children("span").click(function() \{  
                            $(this).toggleClass("butActivebiao");  
                        \});  
                    \}  
                \},  
                error: function() \{  
                    alert("数据开小差了");  
                \}  
            \})  
        \}  
  
  
        //初始化选中项  
        var selectop = $("\#selectOption option:selected").val();  
        index(selectop);  
  
  
        //下拉框改变事件  
        $("\#selectOption").change(function() \{  
            var selectop = $("\#selectOption option:selected").val();  
            index(selectop);  
        \});  
  
  
  
  
  
  
        $("\#loadBtn").click(function() \{  
            var lab = $(".label\_btn");  
  
  
            //转化为数组   
            var checkarr = \[\];  
            for (var i = 0; i < lab.length; i++) \{  
                if (lab.eq(i).children("span").attr("class").indexOf("butActive") > -1) \{  
                    checkarr.push(lab.eq(i).children("span").attr("id"));  
                \}  
            \}  
  
  
            //数组转化成字符串  
            var str = checkarr.join(",");  
            console.log("str>" + str);  
            /\* //存放指标数组  
            var arrid = \[\];  
            for (var j = 0; j < $(".idd").length; j++) \{  
            if ($(".idd").eq(j).attr("class").indexOf("butActivebiao") > -1) \{  
            console.log($(".idd").eq(j).attr("id"));  
            \}  
            \} \*/  
  
  
            var label = $(".idd");  
            var arrid = \[\];  
            for (var j = 0; j < label.length; j++) \{  
  
  
                if (label.eq(j).attr("class").indexOf("butActivebiao") > -1) \{  
                    arrid.push(label.eq(j).attr("id"));  
                \}  
            \}  
            var strid = arrid.join(",");  
            console.log("sss---->" + strid);  
            //获取时间  
            var startTime = $("\#begin").val();  
            var endTime = $("\#end").val();  
            console.log("endTime>" + endTime);  
            //selectOption 获取下拉选中项  
            var selectop = $("\#selectOption option:selected").val();  
            /\* http://localhost:8080/sbsys/actives?fields=parentACid,parentAName&begintime=20171120&endtime=20171130&cids=121416009,125044005&type=%E7%B1%BB%E7%9B%AE%E5%B1%9E%E6%80%A7&index=1&size=10 \*/  
            $.ajax(\{  
                url: "http://211.95.60.40:16868/yanshudemo/actives",  
                type: "post",  
                dataType: "json",  
                data: \{  
                    fields: strid,  
                    begintime: startTime,  
                    endtime: endTime,  
                    cids: str,  
                    type: selectop,  
                    index: 1,  
                    size: 10  
                \},  
                success: function(data) \{  
                    console.log("1111==>"+data.counts);  
                        
                    if(data.counts>0)\{  
                     //循环表头  
                        var str = "";  
                        str = "<tr>" +  
                            "<td>" + data.data.columns\[0\] + "</td>" +  
                            "<td>" + data.data.columns\[1\] + "</td>" +  
                            "<td>" + data.data.columns\[2\] + "</td>" +  
                            "<td>" + data.data.columns\[3\] + "</td>" +  
                            "<td>" + data.data.columns\[4\] + "</td>" +  
                            "<td>" + data.data.columns\[5\] + "</td>" +  
                            "</tr>";  
                        $("\#tr").html(str);  
                        //循环表的内容   
                        var row = "";  
                        for (var j = 0; j < data.data.rows.length; j++) \{  
                            row += "<tr>" +  
                                "<td>" + data.data.rows\[j\]\[0\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[1\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[2\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[3\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[4\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[5\] + "</td>" +  
                                "</tr>";  
                        \}  
                        $("\#body").html(row);  
                    \}  
                    
                \},  
                error: function(data) \{  
                    alert("no data")  
                \}  
  
  
            \})  
  
  
        \})  
          
          
          
          
        $("\#inclick").click(function()\{  
        $.ajax(\{  
               url: "http://211.95.60.40:16868/yanshudemo/actives?fields=parentACid,parentAName&begintime=20171120&endtime=20171130&cids=121416009,125044005&type=%E7%B1%BB%E7%9B%AE%E5%B1%9E%E6%80%A7&index=1&size=10 ",  
               type:"get",  
               dataType:'json',  
               success:function (data) \{  
                  
                  
                   //循环表头的标题   
                   var str= "<tr>" +  
                            "<td>" + data.data.columns\[0\] + "</td>" +  
                            "<td>" + data.data.columns\[1\] + "</td>" +  
                            "<td>" + data.data.columns\[2\] + "</td>" +  
                            "<td>" + data.data.columns\[3\] + "</td>" +  
                            "<td>" + data.data.columns\[4\] + "</td>" +  
                            "<td>" + data.data.columns\[5\] + "</td>" +  
                            "</tr>";;  
                   
                   $("\#tr1").html(str);  
                   //循环表的内容   
                     console.log(data);  
                   var table="";  
                   for(var j=0;j<data.data.rows.length;j++)  
                    \{  
                      
                    table+= "<tr>" +  
                                "<td>" + data.data.rows\[j\]\[0\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[1\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[2\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[3\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[4\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[5\] + "</td>" +  
                                "</tr>";  
                    \}  
                   $("\#body1").html(table);    
  
        \},  
        error:function (data) \{  
            console.log(data);  
        \}  
    \})  
\})  
  
  
//tab  
function openCity(evt, cityName) \{  
    var i, tabcontent, tablinks;  
    tabcontent = document.getElementsByClassName("tabcontent");  
    for (i = 0; i < tabcontent.length; i++) \{  
        tabcontent\[i\].style.display = "none";  
    \}  
    tablinks = document.getElementsByClassName("tablinks");  
    for (i = 0; i < tablinks.length; i++) \{  
        tablinks\[i\].className = tablinks\[i\].className.replace(" active", "");  
    \}  
    document.getElementById(cityName).style.display = "block";  
    evt.currentTarget.className += " active";  
\}  
  
  
        $.ajax(\{  
               url: "http://211.95.60.40:16868/yanshudemo/actives?fields=parentACid,parentAName&begintime=20171120&endtime=20171130&cids=121416009,125044005&type=%E7%B1%BB%E7%9B%AE%E5%B1%9E%E6%80%A7&index=1&size=10 ",  
               type:"get",  
               dataType:'json',  
               success:function (data) \{  
                  
                  
                   //循环表头的标题   
                   var str= "<tr>" +  
                            "<td>" + data.data.columns\[0\] + "</td>" +  
                            "<td>" + data.data.columns\[1\] + "</td>" +  
                            "<td>" + data.data.columns\[2\] + "</td>" +  
                            "<td>" + data.data.columns\[3\] + "</td>" +  
                            "<td>" + data.data.columns\[4\] + "</td>" +  
                            "<td>" + data.data.columns\[5\] + "</td>" +  
                            "</tr>";;  
                   
                   $("\#tr2").html(str);  
                   //循环表的内容   
                     console.log(data);  
                   var table="";  
                   for(var j=0;j<data.data.rows.length;j++)  
                    \{  
                      
                    table+= "<tr>" +  
                                "<td>" + data.data.rows\[j\]\[0\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[1\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[2\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[3\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[4\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[5\] + "</td>" +  
                                "</tr>";  
                    \}  
                   $("\#body2").html(table);    
  
        \},  
        error:function (data) \{  
            console.log(data);  
        \}  
    \})  
  
$.ajax(\{  
               url: "http://211.95.60.40:16868/yanshudemo/actives?fields=parentACid,parentAName&begintime=20171120&endtime=20171130&cids=121416009,125044005&type=%E7%B1%BB%E7%9B%AE%E5%B1%9E%E6%80%A7&index=1&size=10 ",  
               type:"get",  
               dataType:'json',  
               success:function (data) \{  
                  
                  
                   //循环表头的标题   
                   var str= "<tr>" +  
                            "<td>" + data.data.columns\[0\] + "</td>" +  
                            "<td>" + data.data.columns\[1\] + "</td>" +  
                            "<td>" + data.data.columns\[2\] + "</td>" +  
                            "<td>" + data.data.columns\[3\] + "</td>" +  
                            "<td>" + data.data.columns\[4\] + "</td>" +  
                            "<td>" + data.data.columns\[5\] + "</td>" +  
                            "</tr>";;  
                   
                   $("\#tr3").html(str);  
                   //循环表的内容   
                     console.log(data);  
                   var table="";  
                   for(var j=0;j<data.data.rows.length;j++)  
                    \{  
                      
                    table+= "<tr>" +  
                                "<td>" + data.data.rows\[j\]\[0\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[1\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[2\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[3\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[4\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[5\] + "</td>" +  
                                "</tr>";  
                    \}  
                   $("\#body3").html(table);    
  
        \},  
        error:function (data) \{  
            console.log(data);  
        \}  
    \})  
         $.ajax(\{  
               url: "http://211.95.60.40:16868/yanshudemo/actives?fields=parentACid,parentAName&begintime=20171120&endtime=20171130&cids=121416009,125044005&type=%E7%B1%BB%E7%9B%AE%E5%B1%9E%E6%80%A7&index=1&size=10 ",  
               type:"get",  
               dataType:'json',  
               success:function (data) \{  
                  
                  
                   //循环表头的标题   
                   var str= "<tr>" +  
                            "<td>" + data.data.columns\[0\] + "</td>" +  
                            "<td>" + data.data.columns\[1\] + "</td>" +  
                            "<td>" + data.data.columns\[2\] + "</td>" +  
                            "<td>" + data.data.columns\[3\] + "</td>" +  
                            "<td>" + data.data.columns\[4\] + "</td>" +  
                            "<td>" + data.data.columns\[5\] + "</td>" +  
                            "</tr>";;  
                   
                   $("\#tr4").html(str);  
                   //循环表的内容   
                     console.log(data);  
                   var table="";  
                   for(var j=0;j<data.data.rows.length;j++)  
                    \{  
                      
                    table+= "<tr>" +  
                                "<td>" + data.data.rows\[j\]\[0\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[1\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[2\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[3\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[4\] + "</td>" +  
                                "<td>" + data.data.rows\[j\]\[5\] + "</td>" +  
                                "</tr>";  
                    \}  
                   $("\#body4").html(table);    
  
        \},  
        error:function (data) \{  
            console.log(data);  
        \}  
    \})  
          
    </script>  
</body>  
  
  
</html>