javascript - 动态 ajax bootstrap 模态框无法正常工作

Question

我有这段代码，用于使用 $.ajax 和 json 在 Bootstrap 模式框中显示动态数据。

JS:

$(function() {

    $('.push').click(function() {
        var id = $(this).attr('id');

        $.ajax({
            type: 'post',
            url: '<?PHP echo SITE;?>controller/booksdetails.php', // in here you should put your query 
            dataType: "json",
            data = {
                'bookid': id,
                'csrf_token': <?php echo $token; ?>
            },
            success: function(r) {
                // now you can show output in your modal 
                $('#bookdetails').modal({
                        backdrop: 'static',
                        keyboard: false
                    }) // put your modal id 
                $('.something').show().html(r);
            }
        });


    });

});

HTML:

<a href="javascript:void(0)" id="241" class="push info" title="Full details">show details</a>

<div id="bookdetails" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">title</h4>
            </div>
            <div class="modal-body text-justify">
               <div class="something" style="display:none;">

             </div>
            </div>
            <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-primary btn-sm"> close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

但实际上当我点击链接时，模态和数据没有显示!如何解决问题并在我的模态中显示值？

DEMO

Answer 1

你有几个错别字:

'csrf_token': <?php echo $token; ?> 

应该是:

 'csrf_token': '<?php echo $token; ?>'

字符串必须用引号引起来。

还有:

data = {
    'bookid': id,
    'csrf_token': <?php echo $token; ?>
},

应该是:

data: {
    'bookid': id,
    'csrf_token': <?php echo $token; ?>
},

对象的属性分配是使用 : 而不是 = 运算符执行的。

我 mock 了你的 ajax reuqest 并修复了上面提到的拼写错误。您的代码工作正常:

http://jsfiddle.net/kwv3h8jv/2/