javascript - 通过 AJAX 提交表单

Question

我有一个如下所示的表单:

 <form accept-charset="UTF-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">
     <div class="field">
          <label for="username">Email:</label>
          <input class="text" id="passwordEmail" name="username" required="required" size="30" type="text">
          <div class="field-meta">Put in your email, and we send you instructions for changing your password.</div>
     </div>

     <div class="field">
          <input id="submitPasswordRequest" class="full-width button" name="commit" tabindex="3" type="submit" value="Get Password">
     </div>

     <div class="field center">
          <a href="#" onclick='togglePasswordForm(); return false;' class="password_link extra_form_link">Nevermind, I Remembered</a>
     </div>

我正在尝试通过 AJAX 发帖，所以我做了一个像这样的简单测试:

  $("#submitPasswordRequest").click(function() {
       var username = $('#passwordEmail').value();
       console.log(username);

       /*
       $.ajax({
           type: "POST",
           url: "/resetting/send-email",
           data: { username: username}, // serializes the form's elements.
           success: function( data ) {
               console.log(data); // show response from the php script.
           }
       });
       */

       return false;
  });

但是似乎没有触发点击功能，而是通过常规表单操作发布表单。我在这里做错了什么？我想通过 AJAX 处理这个问题。

Answer 1

当您点击按钮时，您只需将表单提交到后端。要覆盖此行为，您应该覆盖表单上的 submit 操作。旧样式:

<form onsubmit="javascript: return false;">

新风格:

$('form').submit(function() { return false; });

在提交时你想执行一个 ajax 查询:

$('form').submit(function() {
    $.ajax({  }); // here we perform ajax query
    return false; // we don't want our form to be submitted
});