我已经创建了一个包含服务器端数据的表,供管理员批准。
我正在使用 - MongoDB,NodeJS和Express以及EJS视图。当我尝试将JQuery与Ajax请求一起使用时,我遇到了一个问题,以便在用户单击已批准或未批准的按钮时传回数据的唯一ID和批准状态。
所以我不断收到所有传回数据的id。
这是我的代码示例
<!-- EJS -->
<table class="table table-hover m-0 tickets-list table-actions-bar dt-responsive nowrap" cellspacing="0" width="100%" id="datatable">
<thead>
<tr>
<th>
<b>S/N</b>
</th>
<th><b>Name</b></th>
<th><b>Department</b></th>
<th><b>Status</b></th>
<th><b>Review</b></th>
<th><b>Approve</b></th>
<th><b>Disapprove</b></th>
</tr>
</thead>
<tbody>
<% profileData.forEach(function(item, index){ %>
<tr>
<td><b><%= index + 1 %></b></td>
<td>
<a
<span class="ml-2"><%= item.lastname + " " + item.firstname %></span>
</a>
</td>
<td>
<a
<span class="ml-2"><%= item.department %></span>
</a>
</td>
<% if (item.approved === 'pending'){ %>
<td>
<span class="badge badge-secondary">Pending</span>
</td>
<% } else if (item.approved === 'approved'){ %>
<td>
<span class="badge badge-success">Approved</span>
</td>
<% } else { %>
<td>
<span class="badge badge-danger">Disapproved</span>
</td>
<% } %>
<td>
<button type="button" class="btn btn-secondary waves-effect waves-light btn-sm"><i class=" fi-clipboard"></i></button>
</td>
<td>
<button type="button" class="btn btn-success waves-effect waves-light btn-sm" id="btn-success"><i class=" fi-check"></i></button>
</td>
<td>
<button type="button" id="disapproved" class="btn btn-danger waves-effect waves-light btn-sm"><i class=" fi-cross"></i></button>
</td>
</tr>
<% }); %>
</tbody>
</table>
jQuery的/阿贾克斯
<% profileData.forEach(function(item, index){ %>
<script type="text/javascript">
$(function(){
$('#btn-success').click(function(e){
e.preventDefault();
console.log('select_link clicked');
var userId = <%- JSON.stringify(item.userId) %>;
console.log(userId);
var data = {};
// data.Id = userId;
data.message = "approved";
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
url: 'http://localhost:8080/',
success: function(data) {
console.log('success');
// console.log(JSON.stringify(data));
}
});
});
});
</script>
<% }); %>
这是另一种简单的方法:首先在每个成功按钮上添加一个id="<%= item.userId %>"
并附加一个像这样的onclick属性。
<td>
<button type="button" id="<%= item.userId %>" onclick="approve(this.id)" class="btn btn-success waves-effect waves-light btn-sm" id="btn-success"><i class=" fi-check"></i></button>
</td>
然后在js中你可以这样使用这个功能。
<script type="text/javascript">
function approve(id) {
var userId = id;
console.log(userId);
var data = {};
// data.Id = userId;
data.message = "approved";
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
url: 'http://localhost:8080/',
success: function(data) {
console.log('success');
// console.log(JSON.stringify(data));
}
});
}
</script>
好的,我会在答案部分发布。在表上,您应该在每行中添加一个输入隐藏类型:
<% profileData.forEach(function(item, index){ %>
<tr>
<td><b>
<%= index + 1 %></b>
<input type="hidden" class="item_id" value="<%- JSON.stringify(item.userId) %>" /></td>
<td>
<a <span class="ml-2">
<%= item.lastname + " " + item.firstname %></span>
</a>
</td>
<td>
<a <span class="ml-2">
<%= item.department %></span>
</a>
</td>
<% if (item.approved === 'pending'){ %>
<td>
<span class="badge badge-secondary">Pending</span>
</td>
<% } else if (item.approved === 'approved'){ %>
<td>
<span class="badge badge-success">Approved</span>
</td>
<% } else { %>
<td>
<span class="badge badge-danger">Disapproved</span>
</td>
<% } %>
<td>
<button type="button" class="btn btn-secondary waves-effect waves-light btn-sm"><i class=" fi-clipboard"></i></button>
</td>
<td>
<button type="button" class="btn btn-success waves-effect waves-light btn-sm"><i class=" fi-check"></i></button>
</td>
<td>
<button type="button" id="disapproved" class="btn btn-danger waves-effect waves-light btn-sm"><i class=" fi-cross"></i></button>
</td>
</tr>
<% }); %>
而且你只需要一个这样的脚本部分:
<script type="text/javascript">
$(function(){
$('.btn-success').click(function(e){
e.preventDefault();
console.log('select_link clicked');
var userId = $(this).closest("tr").find(".item_id")
.first().value;
console.log(userId);
var data = {};
// data.Id = userId;
data.message = "approved";
$.ajax({
method: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
url: 'http://localhost:8080/',
success: function(data) {
console.log('success');
// console.log(JSON.stringify(data));
}
});
});
});
</script>
所以在这一点上,事件将会听取每个btn-success
按钮,并且它只运行一次