Question

我执行了AJAX请求，将内容加载到页面中。这是我为此请求创建的函数：

    function displayForums() {

        var session = "<?php echo $_SESSION['id'] ?>";

        $.ajax({
            url: 'includes/threads/display_forums.php',
            data: 'POST',
            data: {session: session},
            success: function(data) {
                console.log("display successful");
                $(data).appendTo("#forums-container");  
            }
        });
    }

然后，我在文档加载时调用我刚刚声明的函数（displayForums（））：

$(document).ready(displayForums());

最后，我有一个AJAX调用，它将来自表单的用户输入提交到数据库中。

$("#start-thread-form").submit(function() {

        var forum_title = $("#start-thread-form input").val();
        var forum_message = $("#start-thread-form textarea").val();
        var id = "<?php echo $_SESSION['id'] ?>";

        $.ajax({
            url: 'includes/threads/insert_forums.php',
            type: 'POST',
            data: {forum_title: forum_title, forum_message: forum_message, id: id},
            success: function(data) {
                console.log(data);
                $(".success-msg").append("Thread created successfully" + "<br>").show();
                setTimeout(function() {
                    $(".success-msg").hide();
                    $(".success-msg").text('');
                }, 2000);
                $('input[type="text"],textarea').val('');
            }, 
            error: function(requestObject, error, errorThrown) {
                console.log(error);
                console.log(errorThrown);
            }
        });
    });

问题在于，当将数据插入数据库的AJAX调用完成时，除非刷新页面，否则原始AJAX调用不会将新数据加载到页面中。我尝试将displayForums()函数放在成功函数的内部，但是没有用。如何在不刷新页面的情况下调整AJAX调用以加载新插入的数据？

Answer 1

在表单的Submit事件触发时运行JavaScript。

表单提交的默认行为是向action发出HTTP请求并将响应作为新页面加载。

如果您不希望提交表单，则必须停止它。

$("#start-thread-form").on("submit", function(event) {
    event.preventDefault();

Answer 2

$(document).ready(displayForums());

这是错误的，应该是：

$(document).ready(function() { displayForums() });

没有页面刷新，AJAX不会加载新页面内容

2 个答案: