通过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和PHP页面上的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 
} 

}) 

}); 

$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 3

使用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 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; 
});