Javascript 使用PHP向数据库添加注释（使用AJAX防止页面重新加载）

我正在尝试制作一个评论系统，它使用PHP和AJAX添加到数据库中，而不必重新加载页面（如果重新加载页面，它将随机选择另一个电影建议）

---

目前它似乎不起作用——当我点击“提交评论”时，它会重新加载页面（加载另一部电影），而不会向数据库中插入任何内容

如果可能的话，我也希望在提交后能在下面的评论部分发表评论

谢谢你的帮助

yourfilm.php（显示电影的流程页面，由上一页表单上选择的选项指定）

home\u start\u logged.php只是一个标题模板，我不会发布所有内容，但它包含：

<script src="js/addCommentAJAX.js" type="text/javascript"></script>

---

编辑：添加了有关错误的更具体信息（见上文）。

因此，这里可能发生的情况是您没有使用

事件。preventDefault（）

这将停止您的提交按钮重新加载页面，这将允许您的ajax代码和发布注释的代码最终运行

---

preventDefault

背后的思想是，它阻止submit按钮执行其默认行为，即提交表单并重新加载页面。

没有足够的数据来制定精确的解决方案，但我发现两个问题：

1-您没有在提交函数

事件中阻止默认表单提交。preventedfautlt（）

或只是将表单中的输入

类型

属性更改为按钮而不是提交

2-如果你不想看到用户刚刚发送的注释，那么你可以使用函数

append（）

将其显示在注释部分的末尾，这是最快的方法，而不是等待它从数据库中显示出来。你能改变这一点吗

$("#submitComment").click( function() {
 $.post( $("#frmFilmComments").attr("action"), 
         $("#frmFilmComments :input").serializeArray(), 
         function(info){ $("#commentResult").html(info); 
   });
 clearInput();
});

到

并将submitComment类型更改为button？还有更好的方法可以做到这一点：

   //rough code including the submit and post data
 $('form.frmFilmComments').on('submit', function() {
                        if(confirm('Do u want to input that field')){
                        fields-=1;
                        var obj = $(this), 
                            url = obj.attr('action'),
                            method = obj.attr('method'),
                            data = {};
                        $("#hdnlstcount").val(fields);
                        //console.log(fields);
                        obj.find('[name]').each(function(index, value) {

                            var obj = $(this),
                                name = obj.attr('name'),
                                value = obj.val();
                            data[name] = value;
                        });
                        $.ajax({
                            url: url,
                            type: method,
                            data: data,
                            success: function(response2) {
                                //do sth with success response
                            }
                        });
                        return false; //disable refresh
                                             clearInput();
                        }
                    });

---

你所说的“此刻它似乎不起作用”是什么意思？发布一个特定的问题，兄弟：）“此刻它似乎不起作用”。。。怎样？发布错误。新的addCommentAJAX.js如下：

$（“#submitComment”）。单击（函数（事件）{event.preventDefault（）；$.Post（$（“#frmFilmComments”）.attr（“action”），$（“#frmFilmComments:input”）.serializeArray（），函数（info）{$（“#commentResult”）.html（info）}）；clearInput（）$（“#frmFilmComments”）.submit（函数（事件）{event.preventDefault（）；return false；}）；函数clearInput（）{$（“#frmFilmComments:input”）.each（函数（事件）{event.preventDefault（）；$（this.val（“”）}）}

不幸的是它仍然refreshes@jb93您不应该需要最后一个

preventDefault

，但我怀疑这是导致问题的原因，我会尽力回复你。我删除了最后一个

preventDefault

，但不幸的是你是对的。我真的很感谢你的帮助！我将

更改为

，新的addCommentAJAX.js如下：

$（“#submitComment”）。单击（函数（事件）{event.preventDefault（）；$.post（$（“#frmFilmComments”）.attr（“动作”），$（“#frmFilmComments:input”）.serializeArray（），函数（信息）{$（“#commentResult”）.html（信息）}）；clearInput（）$（“#frmFilmComments”）.submit（函数（事件）{event.preventDefault（）；return false；}）；函数clearInput（）{$（“#frmFilmComments:input”）.each（函数（事件）{event.preventDefault（）；$（this.val（“”）}）}

不幸的是，它仍然刷新，没有将更改为抱歉，我只是尝试将其更改为。页面现在不重新加载，现在什么也没有发生。我已经检查了数据库，但没有提交任何内容。现在没有任何内容进入数据库，因为您错过了使用。serializeArray（）您正在发布我建议使用的多个数组。serialize（）不幸的是，没有更改我将输入类型更改为button，我也尝试了您的代码-现在，当我单击“提交注释”时，什么都没有发生（至少它现在没有重新加载！）我检查了数据库，但没有提交任何内容。第二个呢？它用于提交类型输入？

$("#submitComment").click( function() {
 $.post( $("#frmFilmComments").attr("action"), 
         $("#frmFilmComments :input").serializeArray(), 
         function(info){ $("#commentResult").html(info); 
   });
 clearInput();
});

function onclicksth() {
 $.post( $("#frmFilmComments").attr("action"), 
         $("#frmFilmComments :input").serializeArray(), 
         function(info){ $("#commentResult").html(info); 
   });
 clearInput();
}

   //rough code including the submit and post data
 $('form.frmFilmComments').on('submit', function() {
                        if(confirm('Do u want to input that field')){
                        fields-=1;
                        var obj = $(this), 
                            url = obj.attr('action'),
                            method = obj.attr('method'),
                            data = {};
                        $("#hdnlstcount").val(fields);
                        //console.log(fields);
                        obj.find('[name]').each(function(index, value) {

                            var obj = $(this),
                                name = obj.attr('name'),
                                value = obj.val();
                            data[name] = value;
                        });
                        $.ajax({
                            url: url,
                            type: method,
                            data: data,
                            success: function(response2) {
                                //do sth with success response
                            }
                        });
                        return false; //disable refresh
                                             clearInput();
                        }
                    });