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

本文链接：https://blog.youkuaiyun.com/Hi_Boy_/article/details/80104322

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>
        </div>
        <div class="modal-body">
            <h3>body</h3>
        </div>
        <div class="modal-footer">
            <button class="btn btn-sm" data-dismiss="modal">关闭</button>
            <button class="btn btn-sm btn-success">提交</button>
        </div>
    </div>
</div>

js代码：

<script>
    $('#test').click(function (event) {
            //如果是a链接，阻止其跳转到url页面
            event.preventDefault();
            //获取url的值
            var url = $('#test').data('remote')||$('#test').attr('href');
            //将id为deadAdd的页面元素作为模态框激活
            $('#deadAdd').modal();
            //从url加载数据到模态框
            $('#deadAdd').load(url);
    })
</script>

后台代码（此处一springMVC框架为例,类路径为@RequestMapping('retire')）：

@RequestMapping(value = "add/dead")
public ModelAndView addDead(){
    ModelAndView mv = new ModelAndView("addModel");
    return mv;
}

流程梳理：当用户点击index页面的添加按钮时会触发js代码里的点击事件，点击事件触发的方法里

先通过jquery的preventDefault()方法阻止a链接进行页面跳转（如果模态框触发器是a链接的话）

接着通过jquery的data()方法（获取data-remote 的值）attr()方法(获取a链接的href的值)获取到

<a>或<button>的href或data-remote传递的url

然后用bootStrap的modal()方法激活index页面某个<div>作为模态框

最后用jquery的load(url)方法加载数据到index页面中模态框的.modal-content中

这样index页面的模态框就会显示出来。

2.用<a>标签作为模态框触发器

用<a>标签作为模态框触发器时可用href属性来替代data-remote来传递url,如果想着要做需要注意两点：

①取值时用jquery的attr('href')方法

②激活时先调用jquery的preventDefault()方法来取消<a>标签的默认行为（即：组织<a>标签跳转到url）