模态引导帮助无法与Ajax配合使用

Question

我的类小项目有问题，该项目不会将数据插入数据库，我使用bootstrap模式收集的数据，并使用AJAX将它们传递给PHP文件。错误是在使用脚本时出现的，我认为这是正确的，但是我不执行操作。

这是我使用的脚本：

<script type="text/javascript"> 
    $(document).ready(function(){      
        $('#confirm').click(function() {
          var tk =  $("#task").val();
          var dt = $("#date").val();
          var at = $("#amount").val();
          var st = $("#status").val();
          $.ajax({
            type: "POST",
            url: "insert.php",
            data: {"task": tk, "date": dt, "amount": at, "status": st},
            success: function (msg) {
                $("#task").val("");
                $("#date").val("");
                $("#amount").val("");
                $("#status").val("");
            }
          });
        });
    });
</script>

这是模态：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">New task</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body" id="task_insert">
                <div class="form-group">
                    <label for="recipient-name" class="form-control-label">Task:</label>
                    <input type="text" required class="form-control" id="task">
                </div>
                <div class="form-group">
                    <label for="recipient-name" class="form-control-label">Date:</label>
                    <input class="form-control" required type="text" id="date">
                </div>
                <div class="form-group">
                    <label for="recipient-name" class="form-control-label">Amount:</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input type="number" class="form-control" required id="amount">
                        <div class="input-group-addon">€</div>
                    </div>
                </div>
                <div class="form-group">
                    <label for="recipient-name" class="form-control-label">Status:</label>
                    <input type="text" class="form-control"  id="status" >
                </div>
            </div>
            <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" id="confirm" class="btn btn-success" data-dismiss="modal">Confirm</button>
            </div>
        </div>
    </div>
</div>

感谢大家的支持

Answer 1

希望这对您有帮助

在页面顶部添加jQuery：

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

然后写下您的ajax脚本并在insert.php页面中获取您的价值，例如：

$ task = $ _post ['task'];

echo $ task;

如果仍然不起作用，请在模态内进行表单，并使用jQuery提交表单。