带有 JQuery 和 AJAX 的 Bootstrap 4 模态？

Posted

技术标签:

【中文标题】带有 JQuery 和 AJAX 的 Bootstrap 4 模态？【英文标题】：Bootstrap 4 Modal with JQuery and AJAX? 【发布时间】：2018-03-04 12:43:52 【问题描述】：

基本上，我在模态框内有一个表单。我需要从模式中获取信息，以便可以在我的应用程序的其余部分中使用它。

我尝试了一些使用 JQuery 和 AJAX 来处理信息的教程，但我似乎无法让它们工作。

有人可以帮忙吗？

这就是给我带来问题的原因：

<script>
   $(document).ready(function()
        $("#save").click(function()
            $.ajax(            
            //No matter what I put in here, I can't get it to do ANYTHING. 
            );         
        );
   );
</script>

根据要求，我尝试过的事情（显然不是一次全部）。对于所有这些，当我单击保存按钮时，绝对没有任何反应。我没有得到任何输出到控制台，我无法关闭模式，什么都没有。

我已经做出了下面 gaetanoM 建议的更改，但似乎没有帮助。

<script>
$(document).ready(function()
    $("#save").click(function()    
        $.ajax(
            url: '/test',
            data: 
                display: $('#myInput').val(),
            ,
            type: 'POST',
            success: function(res) 
                $('#myModal').modal('hide');
            ,
            error: function(error) 
                $('#myModal').modal('hide');
                console.log(error);
            
        )
    );
);
</script>


<script>
   $(document).ready(function()
        $("#save").click(function()
            $.ajax(           
                success: function(res) 
                console.log(res);
            ,
                error: function(error) 
                console.log(error);
             
            );         
        );
   );
</script>

<script>
   $(document).ready(function()
        $("#save").click(function()
            $.ajax(           
            //No matter what I put in here, I can't get it to do ANYTHING. 
            );         
        );
   );
</script>

<script>
   $(document).ready(function()
        $("#save").click(function()
            $.ajax(            
                $('#myModal').modal('hide'); 
            );         
        );
   );
</script>

<script>
   $(document).ready(function()
        $("#save").click(function()
            $.ajax(
                $('#myModal').modal('hide');
            );    
            $('#myModal').modal('hide');
        );
   );
</script>

<script>
   $(document).ready(function()
        $("#save").click(function()
            $.ajax(
                $('#myModal').modal('hide');
            );   

        );
   );
</script>

下面是我正在尝试做的一个非常非常精简的版本。目前，保存按钮所做的只是隐藏模式。

我想更新标题并最终将信息保存在 SQLite 数据库中。

注意：我也在使用 Python 和 Flask，如果这很重要的话。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<!-- I'm trying to update this header as well as a SQLite database whenever the user submits the modal form -->
<h1 id="display">Hello World</h1>
<button type="button" class="btn" id="showModal" data-toggle="modal" data-target="#myModal">Show Modal</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">
                <h5>Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post">
                    <div class="form-group">
                        <label for="myInput">Input</label>
                        <input type="text" id="myInput" placeholder="Input Here">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="save">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Obviously, this just hides the modal, atm -->
<script>
   $(document).ready(function()
        $("#save").click(function()
            $('#myModal').modal('hide');
        );
   );
</script>
</body>
</html>

【问题讨论】：

您能向我们展示您尝试在其中放入什么以尝试让它做某事吗？从您的模式中获取信息并使用 AJAX 发送它是一个两步过程。只有第二步（AJAX 部分）可以在您在代码中标记的位置完成。 在 OP 中添加了一些我尝试过的东西。 【参考方案1】：

jquery-3.2.1.slim.min.js 库不同于完整的 jquery-3.2.1.min.js。比如ajax方法没有实现。

你可以看看What are the differences between normal and slim package of jquery?

或者，直接从official documentation阅读：

有时您不需要 ajax，或者您更喜欢使用众多专注于 ajax 请求的独立库之一。通常，对所有网络动画使用 CSS 和类操作的组合会更简单。除了包含 ajax 和效果模块的常规 jQuery 版本外，我们还发布了一个不包括这些模块的“slim”版本。如今，jQuery 的大小很少成为负载性能问题，但精简版本比常规版本小约 6k gzipped 字节 - 23.6k vs 30k。

因此，改变这一行：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

到：

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

【讨论】：

我就是这样做的 - 它引入了另一个错误TypeError: Cannot read property 'fn' of undefined https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js:6 ReferenceError: $ is not defined 有什么想法吗？ 图书馆的顺序很重要。包含第一个 jQuery。【参考方案2】：

您不能只从代码中删除 slim。您需要从 JQuery 的网站实际粘贴新的 CDN。我花了几个小时试图从另一篇文章中做到这一点，只是删除了 slim。它不起作用，因为缺少完整性和匿名性，或者如果您只是删除 slim 则完整性和匿名性不正确。

这确实有效。用网站上的这个替换代码中当前的 JQuery CDN。这是 JQuery 3x 的当前最小版本。

如果您需要不同版本的 min 用于 JQuery，例如 2.0 等...然后转到他们网站的 CDN 部分，即：https://releases.jquery.com/

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

【讨论】：

以上是关于带有 JQuery 和 AJAX 的 Bootstrap 4 模态？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用带有 json 和 php 的 jquery 的 $.ajax 函数上传文件

带有 Ajax 的 jQuery FancyBox

带有 LinQ 过滤器和 jQuery tmpl 示例的 jQuery AJAX 请求

带有 ajax 图像更新的 jquery guillotine 插件

使用带有 jquery $.ajax 调用的 Mozilla FormData

带有 templateResult 和 templateSelection 的 jquery select2 (4.0) ajax