bootscript模态框传值

 案例：删除书籍，利用模态框进行二次确认，但是需要将要删除书籍的id传到后端，就需要将书籍的id放在data-whatever="{{ book_obj.pk }}，data-是固定写法，whatever是变量名可以随意起，

按钮

1.  
   <a href="#" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal"
2.  
   data-whatever="{{ book_obj.pk }}">删除</a>

模态框

然后给模态框中的 <button type="button" class="btn btn-primary" id="pay_yes">确定</button>按钮添加点击事件

1.  
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
2.  
   <div class="modal-dialog" role="document">
3.  
   <div class="modal-content">
4.  
   <div class="modal-header">
5.  
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
6.  
   aria-hidden="true">&times;</span></button>
7.  
   <h4 class="modal-title">请输入你的选择</h4>
8.  
   </div>
9.  
   <div class="modal-body">
10.  
    <p>您确定删除嘛&hellip;</p>
11.  
    </div>
12.  
    <div class="modal-footer">
13.  
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
14.  
    <button type="button" class="btn btn-primary" id="pay_yes">确定</button>
15.  
    </div>
16.  
    </div><!-- /.modal-content -->
17.  
    </div><!-- /.modal-dialog -->
18.  
    </div><!-- /.modal -->

js部分

1.  
   <script>
2.  
   $('#myModal').on('show.bs.modal', function (event) {
3.  
   var button = $(event.relatedTarget) // Button that triggered the modal
4.  
   var recipient = button.data('whatever') // Extract info from data-* attributes
5.  
   console.log(recipient)
6.  
    
7.  
   $('#pay_yes').click(function () {
8.  
   $.ajax({
9.  
   url: "{% url 'del_book' %}",
10.  
    type: "POST",
11.  
    data: {shop_id: recipient, csrfmiddlewaretoken: '{{ csrf_token }}'},
12.  
    dataType: "JSON", // 对于返回来的数据，进行反序列化，ajax本身自带反序列化，但是加上他保险
13.  
    success: function (res) {
14.  
    if (res.status === 200) {
15.  
    alert('删除成功')
16.  
    window.location.href = "{% url 'booklist' %}"
17.  
    } else {
18.  
    alert('删除失败')
19.  
    }
20.  
    }
21.  
    })
22.  
    })
23.  
    })
24.  
    </script>

这篇好文章是转载于：学新通技术网