Php Ajax&；Jquery表单提交

我要用这个把我的头发拔出来

我确信问题很简单，我对使用Jquery的Ajax还不熟悉，只是忽略了一些东西。但是，伙计，这真烦人。每次提交表单时，页面都会刷新并

。ajax

抛出

错误：

。这可能是什么原因造成的？我知道我肯定会将表单值发送到Jquery。而且

newcomment.php

正在运行。我可以将常规表单发布到它，但不能使用jquery

function postPhotoComment() {

    var comment = $("#comment").val();
    var album = $("#album").val();
    var photo = $("#photo").val();
    var dataString = "comment="+comment+"&album="+album+"&photo="+photo;

    $.ajax({
        type: "POST",
        url: "/includes/actions/photo-gallery/newcomment.php",
        data: dataString,
        success: function(res) {
            alert("Posted!");
        }
            error: function(res) {
            alert("Error!");
        }
    })  
}

编辑：这是我的html表单：

<form>
    <textarea id="comment" placeholder="Post Comment..."></textarea>
    <input id="album" type="hidden" value="<?php echo "$a"?>"/>
    <input id="photo" type="hidden" value="<?php echo "$p.$ext"?>"/><br/>
    <button id="photo-comment-submit" onclick="postPhotoComment()">Post</button>
</form>

确保您编写了一个有效的、HTTP可访问的url，而不仅仅是脚本的路径，例如

function postPhotoComment() {

    var comment = $("#comment").val();
    var album = $("#album").val();
    var photo = $("#photo").val();
    var dataString = "comment="+comment+"&album="+album+"&photo="+photo;

    $.ajax({
        type: "POST",
        url: "http://yoursite.com/whatever/newcomment.php", // here
        data: dataString,
        success: function(res) {
            alert("Posted!");
        }
            error: function(res) {
            alert("Error!");
        }
    })  
}

因为JavaScript是一种客户端语言。它对文件系统结构或诸如此类的东西一无所知。AJAX请求是基于HTTP协议的。
确保
返回false添加到表单，否则它仍将作为“正常”表单提交，而不使用Ajax并重新加载页面

编辑：阅读评论后，我认为这对您最合适：

带有适当代码的JSFIDLE：

PHP会把事情弄得有点乱，但它可以工作。
如果调用AJAX表单提交代码的函数是表单的
onSubmit
方法，则需要停止默认操作——也就是说，要停止正常提交

要完成此操作，请使用
事件
对象的
preventDefault
方法：

function postPhotoComment(evnt) {
    evnt.preventDefault();

    // existing code continues...

}

您也可以从事件中返回
false
，但请注意，在不同的浏览器中，这样做会产生不同的效果，并且不像直接调用
preventDefault
或
stopPropagation
那样明确可靠

编辑
此外，可能会调用错误处理程序，因为您的代码启动了XHR请求，但当浏览器启动默认操作（提交表单）时，它会取消任何挂起的XHR请求。这将导致触发错误处理程序

编辑2我已经创建了一个JSFIDLE，带有一个工作演示：

文档


event.preventDefault
MDN上的方法-
是否返回false以停止浏览器的默认操作

$('form').submit(function(){
    var dataString = $(this).serialize(); // shortcut

    $.ajax({
        type: "POST",
        url: "/includes/actions/photo-gallery/newcomment.php",
        data: dataString,
        success: function(res) {
            alert("Posted!");
        }
        error: function(res) {
             alert("Error!");
        }
    });

  return false;// cancels the default action
});

实际上，我只需删除
标记就可以解决这个问题。我根本不需要它们。但现在一切似乎都正常了
 如何触发ajax调用以及错误响应中的内容（尝试使用
console.log（res）
并检查控制台？显示运行PosthotoComment（）的代码）函数。以常规方式提交表单将刷新页面，除非您阻止了提交函数的默认操作，否则您可能会以常规方式和ajax提交表单，从而导致页面刷新。@Tyrsius PosthotoComment（）仅通过onclick=“”触发.@Ryanmisth然后，正如其他人所说，您的表单仍将尝试执行提交非ajax样式的默认操作。您需要从函数中返回false，或
preventDefault
@Tyrsius它肯定在执行默认操作，但即使返回false和preventDefault，我仍然会得到相同的结果。@Tyrsius但是谁知道上面所说的是可访问的？即使它不可访问，URL是相对的而不是绝对的也不是问题。你的答案完全错了。@Tyrsius我在任何评论之前已经修正了它，所以这里没有关于绝对/相对路径的内容。伙计，它仍然指向URL是问题所在，即使是现在。我建议你这样做删除此项。@Tyrsius否。任何可能的原因都是一个原因。我认为这是放置返回的错误位置。Aron.Duby有一个更好的解决方案。错误回调被触发，因为浏览器开始导航离开页面（提交表单），它会取消所有未完成的XHR请求。jQuery会将取消请求视为错误，因此会启动错误处理程序。它肯定会执行默认操作，但即使在返回false和preventDefault之后，我仍然会得到相同的结果。@Rypansmith您能设置一个JSFIDLE以便我们可以看到它被复制吗？post部分不是不重要，我感兴趣的是javascript。不过，如果您要将事件绑定到提交按钮的
onclick
，您应该尝试将其放置在表单的
onsubmit
事件上。我明白了。删除表单标记是一种可能的方法，因为您已经消除了表单提交的可能性在没有javascript的情况下运行。有效，但不符合渐进式增强。这可能无关紧要（该功能取决于javascript），但我建议您至少为自己的信息解决实际问题。再次，请查看：