通过AJAX提交表单

问题描述

我有一个看起来像这样的表格:

I have a form that looks as following:

 <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进行发布，因此我做了一个简单的测试，如下所示:

I am trying to do the post via AJAX, so I did a simple test like this:

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

但是，似乎没有触发click函数，而是通过常规的表单操作来发布表单.我在这里做错了什么?我想通过AJAX处理此问题.

However it seems that the click function is not triggered and it goes to posting the form via the regular form action. What am I doing wrong here? I want to handle this via AJAX.

推荐答案

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

When you click upon the button, you simply submit the form to the back-end. To override this behavior you should override submit action on the form. Old style:

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

新样式:

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

提交后，您要执行ajax查询:

And on submit you want to perform an ajax query:

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

这篇关于通过AJAX提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！