为什么Ajax和Jquery不能同时提交表单？

每次提交表单时，页面都会刷新，并且 .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>

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

Make sure you write a valid, HTTP-accessible url instead of just a path to a script, e.g.

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!");
        }
    })  
}

Because JavaScript is a client-side language. It knows nothing about your filesystem structure or anything of that kind. And AJAX request is based on HTTP protocol.

Make sure that you return false; to the form when submitting, otherwise it will still submit as a "normal" form without using Ajax and reload the page.

EDIT: After reading the comments I think that this would be most appropriate for you: <form action="url.php" onsubmit="return false;"></form>

jsFiddle with appropriate code: http://jsfiddle.net/SO_AMK/ZVgNv/

The PHP messes things up a little, but it works.

If the function where you're calling the AJAX form submission code is the onSubmit method of the form, you'll need to stop the default action from happening -- that is, you want to stop normal submission.

To accomplish this, use the preventDefault method of the event object:

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

    // existing code continues...

}

You may also return false from your event, but be aware that doing so has different effects in different browsers, and that it is not as explicit or reliable as calling preventDefault or stopPropagation directly.

Edit Also, the error handler is probably getting called because your code initiates the XHR request, but when the browser starts the default action (submitting the form), it cancels any pending XHR requests. This is causing the error handler to be triggered.

Edit 2 I have created a jsFiddle with a working demonstration: http://jsfiddle.net/wXrAU/

Documentation

event.preventDefault method on MDN - https://developer.mozilla.org/en/DOM/event.preventDefault

Are you returning false to stop the browsers default action?

$('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
});

I actually fixed this by simply removing the <form> tags. I didn't need them anyways. But everything seems to work now.