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

问题描述 投票:1回答:2

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

enter image description here

我正在使用 - 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>

            <% }); %>
jquery node.js ajax express ejs
2个回答
2
投票

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

0
投票

好的,我会在答案部分发布。在表上,您应该在每行中添加一个输入隐藏类型:

<% 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按钮,并且它只运行一次

© www.soinside.com 2019 - 2024. All rights reserved.