Question

我有一个带有文本区域字段的表单我已将数据存储在表格中但是现在我想用动态ajax在同一页面中显示结果，这意味着我想刷新页面而不重新加载

<form action='' method='post''>

<div class="form-group">
  <label for="comment"></label>
  <textarea class="form-control" rows="5" id="comment" name='message_content' required></textarea>
</div>
                                                                             
                                                                             
<button type='submit' class='btn btn-default' name='send_msg'>
                                                           send</button>
</form>

Answer 1

我不是使用javascript框架的强烈支持者，但是，如果没有它，ajax很难处理，所以这里有一个使用JQuery的例子，但它可以与任何其他框架做或多或少相同的事情。 / p>

第一步是拦截提交事件，然后获取表单数据，执行ajax查询并在div中显示结果。

<!DOCTYPE doctype html>
<html>
    <head>
    </head>
    <script src="jquery-3.1.0.min.js">
    </script>
    <script>
        jQuery( document ).ready(function() {
            jQuery('#myForm').submit(function(e){
                e.preventDefault();

                jQuery.ajax({
                    url: e.currentTarget.action,
                    data:{
                        comment: jQuery('#comment').val()
                    }
                }).done(function(data){
                    console.log(data);
                    jQuery('#display-data').append(data);
                });
            });
        });
    </script>
    <body>
        <form id="myForm" action="getData.php" method="post">
            <div class="form-group">
                <label for="comment">
                </label>
                <textarea class="form-control" id="comment" name="message_content" required="" rows="5">
                </textarea>
            </div>
            <button class="btn btn-default" name="send_msg" type="submit">
                send
            </button>
        </form>
        <div id="display-data"></div>
    </body>
</html>

编辑：根据您的评论，我收集了您想要在提交后重新加载页面，您可以在ajax查询结束后执行此操作：

jQuery('#myForm').submit(function(e){
    e.preventDefault();

    jQuery.ajax({
        url: e.currentTarget.action,
        data:{
            comment: jQuery('#comment').val()
        }
    }).done(function(data){
        document.location.reload();
    });
});

如何发送表单数据并使用ajax在同一页面中动态显示它们

1 个答案: