jquery 新增数据成功之后，在grid会出现重复数据刷新后正常，这是为啥？
jquery 新增数据成功之后，在grid会出现重复数据刷新后正常，这是为啥？
新增是 请求了接口 ，还是前端 自己 push到数组里实现的
$(document).ready(function () {
load();
list();
addName();
updateName();
unclaimed();
});
//新增商品相关操作
$(document).on("click", ".add", function () {
$(".add-dialog").removeClass("hidden");
$(".add-confirm-action").removeClass("hidden");
$(".update-confirm-action").addClass("hidden");
$(".target-name").val('');
$(".name-id").val('');
});
//修改商品相关操作
$(document).on("click", ".update", function () {
$(".add-dialog").removeClass("hidden");
$(".update-confirm-action").removeClass("hidden");
$(".add-confirm-action").addClass("hidden");
$(".target-name").val($(this).children(".name").text());
$(".name-id").val($(this).parents("tr").children(".id").text());
//點擊
});
//关闭弹窗
$(document).on("click", ".cancel", function () {
$(".add-dialog").addClass("hidden");
$(".update-confirm-action").addClass("hidden");
$(".add-confirm-action").addClass("hidden");
});
//綁定事件 删除 的點擊事件
$(document).on("click", ".del", function () {
$.ajax({
"url": "controllers/del.php",
"method": "post",
"data": {
type: "delete",
id: $(this).parents("tr").children(".id").text()
},
"success": function (response) {
//成功請求資源時
if (actionType === 1) {
$(".list").click();
} else {
$(".unclaimed").click();
}
}
});
});
// 請求類型 1:list 2:unclaimed
var actionType = 1;
/**
* 奖品列表
*/
function list() {
$(".list").click(function () {
clear();
load();
});
}
function clear() {
$("tr:nth-child(2)").nextAll().each(function () {
$(this).remove();
});
}
/**
* 尚未领取奖品列表
*/
function unclaimed() {
$(".unclaimed").click(function () {
$("tr:nth-child(2)").nextAll().each(function () {
$(this).remove();
});
$.ajax({
"url": "controllers/show.php",
"method": "post",
"data": {
type: "unclaimed"
},
"success": function (response) {
//成功請求資源時
actionType = 2;
var loadArry = JSON.parse(response);
indexgrid(loadArry);
}
});
});
}
/**
* 修改奖品名字
*/
function updateName() {
$(".update-confirm-action").click(function () {
$.ajax({
"url": "controllers/update.php",
"method": "post",
"data": {
type: "modify",
name: $(".target-name").val(),
//待修改
id: $(".name-id").val(),
},
"success": function (response) {
//成功請求資源時
if (actionType === 1) {
$(".list").click();
} else {
$(".unclaimed").click();
}
$(".cancel").click();
}
});
});
}
/**
* 增加獎品
*/
function addName() {
$(".add-confirm-action").click(function () {
if ($(".show-name").val() !== "") {
$.ajax({
"url": "controllers/add.php",
"method": "post",
"data": {
type: "add",
name: $(".target-name").val(),
},
"success": function (response) {
//成功請求資源時
if (actionType === 1) {
$(".list").click();
} else {
$(".unclaimed").click();
}
$(".cancel").click();
}
});
}
});
}
/**
* 初始化列表
*/
function load() {
$.ajax({
"url": "controllers/show.php",
"method": "post",
"data": {
type: "list",
},
"success": function (response) {
//成功請求資源時
actionType = 1;
var loadArry = JSON.parse(response);
indexgrid(loadArry);
}
});
}
this.indexgrid = function (loadArry) {
var loadArry;
for (var i = 0; i < loadArry.length; i++) {
if (loadArry[i].rp_used_datetime === null) {
loadArry[i].rp_used_datetime = "尚未領取";
}
}
for (var i = 0; i < loadArry.length; i++) {
var tr = document.createElement("tr");
var number = document.createElement("th");
var rp_id = document.createElement("th");
var rp_name = document.createElement("th");
var rp_create_datetime = document.createElement("th");
var rp_used_datetime = document.createElement("th");
var update = document.createElement("th");
var del = document.createElement("th");
number.innerHTML = i + 1;
rp_id.innerHTML = loadArry[i].rp_id;
rp_id.className = "id hidden";
rp_name.innerHTML = loadArry[i].rp_name;
rp_name.className = "name"
rp_create_datetime.innerHTML = loadArry[i].rp_create_datetime;
rp_used_datetime.innerHTML = loadArry[i].rp_used_datetime;
var update_button = document.createElement("button");
update_button.innerHTML = "修改";
update_button.className = "update";
update.appendChild(update_button);
var del_button = document.createElement("button");
del_button.innerHTML = "删除";
del_button.className = "del";
del.appendChild(del_button);
if (loadArry[i].rp_used_datetime !== "尚未領取") {
del.className = "hidden";
update.className = "hidden";
}
tr.appendChild(number);
tr.appendChild(rp_id);
tr.appendChild(rp_name);
tr.appendChild(rp_create_datetime);
tr.appendChild(rp_used_datetime);
tr.appendChild(update);
tr.appendChild(del);
$("table:last").append(tr);
}
}
<head>
<title>抽獎</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="icon" href="img/favicon.ico">
<script src="js/jquery-3.6.0.min.js" ></script>
<script src="js/index.js" type="text/javascript" async defer></script>
</head>
<body>
<div class="all">
<table class="prize-table">
<tr>
<th><input type="button" class="list" value="獎品列表"/></th>
<th><input type="button" class="unclaimed" value="尚未領取"/></th>
<th> <a href="template/draw.html"target="_blank"><input type="button" class="draw" value="點擊我去抽奖"/></a> </th>
<th class="empty"></th>
<th class="empty"></th>
<th><input type="button" class="add" value="新增"/></th>
</tr>
<tr>
<th>編號</th><th>名稱</th><th>建立時間</th><th>領取時間</th><th>修改</th><th>刪除</th>
</tr>
<tr data-id="1">
<td>
<input type="text" class="target-name" maxlength="15" pattern="^(?=.*\S).+$" autofocus required />
</td>
</tr>
</table>
</div>
<div class="add-dialog hidden">
<div class="header">
<span>商品名稱： </span>
<input type="text" class="target-name" maxlength="15" pattern="^(?=.*\S).+$" autofocus required />
<input type="text" class="name-id" pattern="^(?=.*\S).+$" autofocus required/>
</div>
<div class="footer">
<button class="cancel">取消</button>
<button class="add-confirm-action confirm hidden">確認</button>
<button class="update-confirm-action confirm hidden">確認</button>
</div>
</div>
</body>
</html>