ray*_*n54 5 javascript ajax jquery twitter-bootstrap bootstrap-4
本质上，我在模态中有一个表单。我需要从模态中获取信息，以便我可以在我的应用程序的其余部分中使用它。
我尝试遵循一些我发现使用 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">×</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 方法。
你可以看看jquery的普通包和瘦包有什么区别？
或者，直接阅读官方文档：
有时您不需要 ajax，或者您更喜欢使用许多专注于 ajax 请求的独立库之一。通常，对所有 Web 动画使用 CSS 和类操作的组合更简单。除了包含 ajax 和效果模块的常规 jQuery 版本外，我们还发布了一个不包含这些模块的“瘦身”版本。如今，jQuery 的大小很少成为负载性能问题，但瘦构建比常规版本小约 6k gzipped 字节 – 23.6k 与 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>
| 归档时间： |
|
| 查看次数： |
11579 次 |
| 最近记录： |