在按钮上单击添加操作 url jquery答案

【问题标题】：on button click add action url jquery在按钮上单击添加操作 url jquery
【发布时间】：2016-03-25 13:28:26
【问题描述】：

我有一个这样的链接：

<a class="glyphicon glyphicon-remove glyphicon-color-red btn-delete" data-toggle="modal" data-target="#myModal" user-id="56f52ea551d72027711157d6"></a>

使用 jquery，单击时我采用参数 user-id 并更改操作 URL，当我单击删除按钮时出现模式弹出窗口，此代码不起作用，但如果我检查元素，我看到该操作为空?

$('.btn-delete').click(function () {
  var user_id = $(this).attr('user-id');
  $('#modal-form').attr('action', "{{ url_for('admin.delete_user', id=" +user_id+" ) }}");
    });

我在python中路由admin.delete_user使用的方法是：

def delete_user(self, id):
    mongo.db.users.remove({'_id': ObjectId(id)})
    return redirect(url_for('admin.users'))

还有模态弹窗：

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title"><span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span></h4>
    </div>
    <form id="modal-form" action=" "  method="POST">
    <div class="modal-body">
      <p>Are you sure?</p>
    </div>
    <div class="modal-footer">
          <button type="button" class="btn btn-default btn-sm btn-style" data-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-default btn-sm btn-filter-apply btn-style" >Yes</button>
    </div>
    </form>
  </div>
</div>

我不明白为什么在 jquery 中没有添加操作 URL？

【问题讨论】：

什么意思action是空的？单击它或从服务器返回时它是空的吗？它是完全空的还是只是缺少 user_id 部分？
当我点击类 .btn-delete 的链接时，出现模态，我看到模态操作 URL 完全为空，就像这样“
" ，我在想问题出在我在url_for上传递参数user_id的时候，但是我不确定？
我认为您的 jquery 不知道如何处理 {{ }}。我要做的是将该部分包含在您的表单操作中，然后将 user_id 附加到 jquery 中
{{}} - 是 jinja 语法，但是如何做到这一点，什么时候会替换 url？
问题是您的服务器在 jquery 之前没有看到 {{ }} 中的函数调用，因此它无法用正确的字符串替换它。您需要找到一种方法将调用放在服务器可以看到它的地方，并稍后使用 js 将 user_id 传递给它。

标签： javascript jquery python html url-for

【解决方案1】：

在进行任何更改之前确保 DOM 已加载，您可以使用 ready()：

$(document).ready(function(){ /* your code */ });

【讨论】：

【解决方案2】：

我会将您的 url_for 函数更改为生成您需要的部分 url，然后将其放在操作 attr 中。然后，使用 jquery 将 user_id 附加到字符串。确保您修改了抓取 url 以解析参数的任何内容。这是一个例子：

url_for 返回类似：http://www.example.com?delete_user=

然后你的表单动作：

<form id="modal-form" action="{{url_for(delete_user)}}"  method="POST">

然后你的 jquery 会：

$('.btn-delete').click(function () {
    var user_id = $(this).attr('user-id');
    var action = $('#modal-form').attr('action');
    $('#modal-form').attr('action', action + user_id);
});

最后，解析表单的任何内容都会查找 url 参数 delete_user= 并使用附加到它的 user_id。

【讨论】：