bootscript模态框传值

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

按钮

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

模态框

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

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">请输入你的选择</h4>
                </div>
                <div class="modal-body">
                    <p>您确定删除嘛&hellip;</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="pay_yes">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

js部分

<script>
             $('#myModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever') // Extract info from data-* attributes
           console.log(recipient)

        $('#pay_yes').click(function () {
            $.ajax({
                url: "{% url 'del_book' %}",
                type: "POST",
                data: {shop_id: recipient, csrfmiddlewaretoken: '{{ csrf_token }}'},
                dataType: "JSON",     // 对于返回来的数据，进行反序列化，ajax本身自带反序列化，但是加上他保险
                success: function (res) {
                    if (res.status === 200) {
                        alert('删除成功')
                        window.location.href = "{% url 'booklist' %}"
                    } else {
                        alert('删除失败')
                    }
                }
            })
        })
    })
    </script>