ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

bootstrap3 模态框弹出后 点击确定调用ajax方法完成后自动关闭模态框并刷新当前页面

2024-07-10 12:33:44  阅读:219  来源: 互联网

标签:


要在 Bootstrap 3 模态框弹出后,在点击确定按钮时调用 AJAX 方法并完成后自动关闭模态框并刷新当前页面,您可以按照以下步骤进行操作:

1.创建一个模态框,并在确定按钮上添加 data-dismiss="modal" 属性,以便在点击确定按钮时自动关闭模态框。例如:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- 模态框内容 -->
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmBtn">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
      </div>
    </div>
  </div>
</div>

HTML

在上面的示例中,我们将确定按钮添加了 data-dismiss="modal" 属性,并给按钮增加了 id="confirmBtn"

2.在 JavaScript 中编写点击确定按钮后的 AJAX 请求,并在请求成功后执行刷新页面的操作。例如:
$('#confirmBtn').on('click', function() {
  // 执行 AJAX 请求
  $.ajax({
    url: 'your-url',
    method: 'POST',
    data: {}, // 根据需要传递参数或数据
    success: function(response) {
      // AJAX 请求成功后执行的操作
      if (response.success) {
        location.reload();  // 刷新当前页面
      }
    }
  });
});

JavaScript

在上述代码中,我们使用了 jQuery 的 $.ajax() 函数来发送 AJAX 请求。在请求成功的回调函数中,您可以根据实际需要执行相应的操作。在这个示例中,如果 AJAX 请求返回的数据中 response.success 为 true,我们通过 location.reload() 方法来刷新当前页面。

请将上述代码根据您的需求进行修改和适配,并确保在页面加载完毕后正确地引入 Bootstrap 和 jQuery 库文件。

这样,当模态框弹出时,点击确定按钮将会触发 AJAX 请求,在请求成功后关闭模态框并刷新当前页面。

标签:
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有