Question

我已经创建了一个包含服务器端数据的表，供管理员批准。

我正在使用-具有EJS视图的MongoDB，NodeJS和Express。当我尝试将JQuery与Ajax请求一起使用以便在用户单击“已批准”或“未批准”按钮时传递回唯一ID和数据的批准状态时，我遇到了一个问题。

所以我不断获取回传的所有数据ID。

这是我的代码示例

   private MyClient myClient;
   @Mock private RestTemplate restTemplate;

   @Before
   public void setUp() throws Exception {
       MockitoAnnotations.initMocks(this);
       myClient = new MyClient(restTemplate);
   }

   //test cases here
}

jQuery / Ajax

<!-- 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>

Answer 1

这是另一种简单的方法：首先，在每个成功按钮上添加一个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>

Answer 2

好的，我将其张贴在答案部分。您应该在表格的每一行内添加一个输入隐藏类型：

<% 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按钮上被监听，并且只能运行一次

将服务器端数据从ejs传递到Ajax

2 个答案: