0

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

我确定问题很简单，我是 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>

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

4

5 回答 5

1

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

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

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

    // existing code continues...

}

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

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

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

文档

于 2012-07-19T22:08:47.763 回答
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
});
于 2012-07-19T22:09:49.367 回答
0

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

于 2012-07-19T23:10:33.613 回答
0

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

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

带有适当代码的 jsFiddle：http: //jsfiddle.net/SO_AMK/ZVgNv/

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

于 2012-07-19T22:05:23.753 回答
-4

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

于 2012-07-19T22:03:29.450 回答