Question

我有一个显示搜索结果的页面。在该页面中有一个表，其中包含用于下载删除文件选项的文件。如果单击文件名，则会下载该文件，但如果单击“删除”，则会删除该文件。出于安全原因，您需要密码才能删除该文件。需要在服务器上验证此密码。当您单击删除时，它会显示一个要求输入密码的模态窗口。现在我的问题是如何将密码和我要删除的文件的ID发送到servlet？因为当我点击删除时，模态窗口没有文件id的信息。

表中的结果如下：

<table>
   <tr>
      <td><a href="?id=11"</td>
      <td><a data-toggle="modal" data-target="#myModal">Delete!</a></td>
   </tr>
</table>

Answer 1

使用data-id属性保存文件ID并在click事件函数中检索它，并使用AJAX将文件ID和密码传递给服务器。

Html看起来像：

<a  class="open-delete-dialog btn btn-danger"
    data-toggle="modal"
    data-target="#myDeleteModal"
    data-id="11">Delete!</a>
<div class="modal hide" id="myDeleteModal">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Enter Password to delete the file: <span id="fileId"></span></h3>
  </div>
    <div class="modal-body">
        <p>Password:</p>
        <input type="password" name="password" id="password"/>
    </div>
 <div class="modal-footer">
    <button type="button"
            class="btn btn-default"
            data-dismiss="modal">Close</button>
    <button id="submit" type="button" 
            class="btn btn-primary">Submit</button>
 </div>
</div>

使用Javascript：

//set fileId to the modal
$(document).on("click", ".open-delete-dialog", function () {
     var myFileId = $(this).data('id');
     $(".modal-header #fileId").val( myFileId );     
});

//get fileId and password and make AJAX post   
$('button#submit').click(function(e){
    $.ajax({
        url: 'your servlet url',
        type: 'POST',
        data: {password: $('.modal-body #password').val(),
               fileId: $('.modal-header #fileId').val()
              },
        success: function(response) {
            //show response to user
        },
        error: function(jqXHR, e) {
            alert('error'+e);
        }
      });
    e.preventDefault();
});

最后在Servlet＃doPost（）方法中获取密码和fileId如：

String password = request.getParameter("password");
String fileId = request.getParameter("fileId");

//Here, do your delete and return response back

将参数发送到servlet

1 个答案: