模态引导程序帮助不适用于ajax

时间:2017-04-25 10:53:22

标签: javascript php jquery ajax twitter-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>

感谢大家的支持

1 个答案:

答案 0 :(得分:0)

希望这会对你有所帮助

在页面顶部添加jquery:

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

然后编写你的ajax脚本并在insert.php页面中获取你的值,如:

$ task = $ _POST ['task'];

echo $ task;

如果仍然不起作用,则在modal中使用form并使用jquery提交表单。