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

Javascript 如何使用ajax在同一页面中发送表单数据并动态显示它们,javascript,php,ajax,Javascript,Php,Ajax,我有一个表单,它有一个文本区域字段,我已经在表中存储了我的数据,但是现在我想用ajax动态地在同一个页面中显示结果,这意味着我想刷新页面而不需要重新加载 我不是使用javascript框架的坚定拥护者,但是,如果没有它,ajax是一件很难处理的事情,因此这里有一个使用JQuery的示例,但是使用任何其他框架都可以做或多或少相同的事情 第一步是拦截submit事件,然后获取表单数据,执行ajax查询并在div中显示结果 <!DOCTYPE doctype html> <html

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


我不是使用javascript框架的坚定拥护者,但是,如果没有它,ajax是一件很难处理的事情,因此这里有一个使用JQuery的示例,但是使用任何其他框架都可以做或多或少相同的事情

第一步是拦截submit事件,然后获取表单数据,执行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>

你能给我们看一些代码吗?你试了什么?你使用的是javascript库吗?我添加了代码我有这个表单我想在文本区域上方的同一页中显示ajax结果否我不使用任何JS你想在提交评论后在同一页中显示评论吗?不不,不,不,只是文本区域中的消息。我想你不明白我的意思,可以吗你的社交网络id像skype或什么应用程序你能告诉我我误解了什么吗。我更愿意在这个网站上回答,而不是用任何其他社交手段,那样的话,答案可能会让其他人受益。我想告诉你我的来源实际上是我创建的一个社交网络。我的问题是关于聊天系统的,但我的系统是完整的php,因为每次发送消息后我都需要重新加载页面,但我需要使用ajax或jquery来完成
jQuery('#myForm').submit(function(e){
    e.preventDefault();

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