通过 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
});

Answer 2

使用 jQuery 的 preventDefault() 方法。另外，value() 应该是 val()。

$("#submitPasswordRequest").click(function (e) {
    e.preventDefault();
    var username = $('#passwordEmail').val();

    ...

});

完整代码：http://jsfiddle.net/HXfwK/1/

你也可以监听表单的submit事件：

$("form").submit(function (e) {
    e.preventDefault();
    var username = $('#passwordEmail').val();

    ...

});

完整代码：http://jsfiddle.net/HXfwK/2/

Answer 3

jquery 和 ajax

$('form id goes here).submit(function(e){
e.preventDefault();

var assign_variable_name_to_field = $("#field_id").val();
...

if(assign_variable_name_to_field =="")
{
handle error here
}

(don't forget to handle errors also in the server side with php)

after everyting is good then here comes ajax

datastring = $("form_id").serialize();

$.ajax({
type:'post',
url:'url_of_your_php_file'
data: datastring,
datatype:'json',
...
success: function(msg){
if(msg.error==true)
{
show errors from server side without refreshing page
alert(msg.message)
//this will alert error message from php
}
else
{
show success message or redirect
alert(msg.message);
//this will alert success message from php
}

})

});

在php页面上

$variable = $_POST['field_name']; //don't use field_id if the field_id is different than field name

...

then use server side validation
if(!$variable)
{
$data['error']= true;
$data['message'] = "this field is required...blah";
echo json_encode($data);
}
else
{
after everything is good
do any crud or email sending 
and then
$data['error'] = "false";
$data['message'] = "thank you ....blah";
echo json_encode($data);
}

Answer 4

您应该使用表单的submit 处理程序而不是点击处理程序。像这样：

$("#formID").submit(function() {

    // ajax stuff here...

    return false;
});

在 HTML 中，将 ID formID 添加到表单元素中：

<form id="formID" accept-charset="UTF-8" action="{{ path("fos_user_resetting_send_email") }}" method="post">

Answer 5

您需要阻止表单提交和刷新页面，然后运行您的 AJAX 代码：

$('form').on('submit',function(e){
    e.preventDefault();

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

    return false;
});