个人中心
gpt4 book ai didi

javascript - 使用 JQuery 和 AJAX 的 Bootstrap 4 模式？

转载 作者：塔克拉玛干 更新时间：2023-11-02 20:55:19 26 4
gpt4 key购买 nike

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

我已经尝试按照我发现的一些使用 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>

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

我想更新 header 并最终将信息保存在 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>

最佳答案

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 读取:

Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version – 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>

关于javascript - 使用 JQuery 和 AJAX 的 Bootstrap 4 模式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46373142/

26 4 0
文章推荐： java - 三星 Galaxy S4 的 Avd 无法正常工作
文章推荐： javascript - 如何从对象生成具有多级标题的数据透视表？
文章推荐： android - Xamarin Studio 2 - 最新的稳定更新 - 执行任务 Aapt : The source sequence is empty 时出错
文章推荐： android - 在 API 控制台中为 Android 应用程序重新创建客户端 ID 时出错
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com