【发布时间】：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">×</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 中添加了一些我尝试过的东西。
标签： javascript jquery ajax twitter-bootstrap bootstrap-4