Fatal编程技术网
  • javascript/
  • Javascript 提交按钮间歇不提交表单信息

Javascript 提交按钮间歇不提交表单信息

javascript php jquery ajax

Javascript 提交按钮间歇不提交表单信息,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,所以我有这个表格，可以在帖子下面添加评论。这里使用的方法是MYSQL（在数据库中保存提交的表单数据）、PHP（与数据库通信）和JavaScript，更具体地说是AJAX（用于连接提交按钮和处理事件）。 在表单中输入评论，然后按submit将评论打印到屏幕上。 当我单击submit时，它不会打印任何内容。然后，当我键入另一条评论并再次单击提交时，它将打印该评论的内容。其他时候，它会成功打印注释的内容，而不是提交失败。 我在inspect元素和控制台日志中签出了它，每当它未命中时，它仍然会发送一些空

所以我有这个表格，可以在帖子下面添加评论。这里使用的方法是MYSQL（在数据库中保存提交的表单数据）、PHP（与数据库通信）和JavaScript，更具体地说是AJAX（用于连接提交按钮和处理事件）。 在表单中输入评论，然后按submit将评论打印到屏幕上。 当我单击submit时，它不会打印任何内容。然后，当我键入另一条评论并再次单击提交时，它将打印该评论的内容。其他时候，它会成功打印注释的内容，而不是提交失败。 我在inspect元素和控制台日志中签出了它，每当它未命中时，它仍然会发送一些空白的
标记以及应该提交的注释类

评论表单的PHP页面：

<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="Forums.css">
</head>
<body>
    <?php
    $result = mysqli_query($link, $displayPost); ?>
    <?php $row = mysqli_fetch_assoc($result);?>
    <p> <?php echo  $row["title"];?> </p>
    <br>
    <p> <?php echo $row["body"];?> </p>
    <form action="<?php echo $url ?>" method="post" id="form-group">
        <div class="forum col-md-12">
            <textarea type="text" style="overflow: auto; resize: none;" name="body" class="txtBody"></textarea>
            <input type="submit" name="submit" class="btnCreate" style="margin-bottom: 4px;">
        </div>
    </form>
</body>
<script>
    function refreshData() {
        $.ajax({
            type:'GET',
            url: 'getcomments.php?id=<?php echo $id ?>',
            dataType: 'html',
            success: function(result){
                console.log(result);
                $('#comments').html(result);
            }
        });    
    }
    $(document).ready(function () {
        refreshData();
        $("#form-group").submit(function (event) {
            var $form = $(this);
            console.log($form.attr('action'));
            var serializedData = $form.serialize();
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: serializedData
            });
            refreshData();
            event.preventDefault();
        });
    });
</script>
<div id="comments"></div>

$(document).ready(function () {
    refreshData();
    $("#form-group").submit(function (event) {
        var $form = $(this);
        console.log($form.attr('action'));
        var serializedData = $form.serialize();
        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: serializedData,
            success: function(){
              refreshData();
            }
        });
        event.preventDefault();
    });
});









当Ajax没有完成时，您正在调用
refreshData（）
。您可以使用$.ajax.success创建回调函数

试试这个：


<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="Forums.css">
</head>
<body>
    <?php
    $result = mysqli_query($link, $displayPost); ?>
    <?php $row = mysqli_fetch_assoc($result);?>
    <p> <?php echo  $row["title"];?> </p>
    <br>
    <p> <?php echo $row["body"];?> </p>
    <form action="<?php echo $url ?>" method="post" id="form-group">
        <div class="forum col-md-12">
            <textarea type="text" style="overflow: auto; resize: none;" name="body" class="txtBody"></textarea>
            <input type="submit" name="submit" class="btnCreate" style="margin-bottom: 4px;">
        </div>
    </form>
</body>
<script>
    function refreshData() {
        $.ajax({
            type:'GET',
            url: 'getcomments.php?id=<?php echo $id ?>',
            dataType: 'html',
            success: function(result){
                console.log(result);
                $('#comments').html(result);
            }
        });    
    }
    $(document).ready(function () {
        refreshData();
        $("#form-group").submit(function (event) {
            var $form = $(this);
            console.log($form.attr('action'));
            var serializedData = $form.serialize();
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                data: serializedData
            });
            refreshData();
            event.preventDefault();
        });
    });
</script>
<div id="comments"></div>



$(document).ready(function () {
    refreshData();
    $("#form-group").submit(function (event) {
        var $form = $(this);
        console.log($form.attr('action'));
        var serializedData = $form.serialize();
        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: serializedData,
            success: function(){
              refreshData();
            }
        });
        event.preventDefault();
    });
});



您正在调用
refreshData（）.suces（）
上”应该是“在
.done（）
上”，前者已经被弃用了一段时间。你的代码中使用的是fineAh，我不知道！我已经有一段时间没有用jQuery编写代码了。谢谢