Bootstrap的data-remote用法详解(模态框加载服务器数据，加载另一个页面的数据)

最新推荐文章于 2024-08-24 11:02:04 发布

一个很酷的人

最新推荐文章于 2024-08-24 11:02:04 发布

阅读量9.6k

点赞数 2

分类专栏： BootStrap 文章标签： data-remote bootStrap

本文链接：https://blog.csdn.net/hi_boy_/article/details/80104322

版权

本文详细介绍了Bootstrap的data-remote属性用于在模态框中加载服务器数据的机制。通过<button>或<a>标签触发，结合js代码和SpringMVC后台处理，实现不跳转页面即可展示远程数据。数据首先通过data-remote或href传递URL，然后利用jQuery的modal()和load()方法动态加载到模态框内。

摘要由CSDN通过智能技术生成

data-remote的作用主要是用来传递URL：

1.用<button>按钮作为模态框触发器

<button id = 'test' data-remote=‘retire/add/dead’> 中data-remote传递的值可在js中用如下方法取出

var url = $('#test').data('remote'); 此时变量url的值就是 'retire/add/dead'

完整流程代码示例：

要显示模态框的页面(index.jsp)：

<button id="test" data-toggle="modal" data-remote="retire/add/dead">
    添加
</button>

<div class="modal" id="deadAdd" style="display: none">

</div>

数据来源页(addModel.jsp)：

<div class="modal-dialog">
    <div class="modal-content" >
        <div class="modal-header">
            <button data-dismiss="modal" class="close">&times;</button>
            <h3 class="modal-title">模态框标题</h3>
        </d