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

来源：互联网发布：vb.net 添加控件编辑：程序博客网时间：2024/05/22 01:03

<!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" onclick="openCity(event, 'London')">类目属性</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">活跃店铺</button>
<button class="tablinks" onclick="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>

阅读全文

0 0