Ajax & Jquery 表单提交

Question

我正要用这个把头发从头上拔下来。

我确定问题很简单，我是 Jquery 的 Ajax 新手，我只是忽略了一些东西。但是，这很烦人。每次提交表单时，页面都会刷新，.ajax 会抛出 error:。这可能是什么原因造成的？我知道我肯定会将我的表单值传递给 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>

我还注意到，如果我提供输入 names，Chrome 会将它们像 GET 变量一样放入 url 栏中。每次页面刷新后，它都会在 url 的末尾添加?。因此，它似乎在尝试定期提交表单。

Answer 1

您是否返回 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
});

Answer 2

如果您调用 AJAX 表单提交代码的函数是表单的 onSubmit 方法，则您需要停止默认操作的发生——也就是说，您要停止正常提交。

为此，请使用event 对象的preventDefault 方法：

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

    // existing code continues...

}

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

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

编辑 2 我创建了一个带有工作演示的 jsFiddle：http://jsfiddle.net/wXrAU/

文档

• event.preventDefault MDN 上的方法 - https://developer.mozilla.org/en/DOM/event.preventDefault

Answer 3

提交时请确保您return false;到表单，否则它仍然会作为“正常”表单提交而不使用Ajax并重新加载页面。

编辑：阅读 cmets 后，我认为这对您最合适： <form action="url.php" onsubmit="return false;"></form>

jsFiddle 使用适当的代码：http://jsfiddle.net/SO_AMK/ZVgNv/

PHP 有点搞砸了，但它可以工作。

Answer 4

我实际上是通过删除<form> 标签来解决这个问题的。反正我不需要它们。但现在一切似乎都正常了。

Answer 5

确保您编写了一个有效的、可通过 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 协议的。