Question

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

我尝试过一些教程，我发现使用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>

Answer 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请求的独立库之一。通常，对所有Web动画使用CSS和类操作的组合更为简单。除了包含ajax和效果模块的常规jQuery版本之外，我们还发布了一个不包含这些模块的“瘦身”版本。 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>

使用JQuery和AJAX的Bootstrap 4 Modal？

1 个答案: