jQuery AJAX响应始终返回空白消息

Question

Hi I'am trying to make HTML form, and need to validate it before executing the form action. But the AJAX respond always returns a blank message?

$(function(){
    $("#ajax-payment-form input[type='submit']").click(function(e) {

        // Prevent form submission
        e.preventDefault();

        // Serialize data, make AJAX call
        var str = $(this).serialize();
        $.ajax({
            type: "POST",
            url: templateDir+"/payment_form/payment_process.php",
            data: str,
            context: this
        }).done(function(msg) {

            if(msg == 'OK') {
                 console.log('Validation passed, will submit form');
                 $(this).closest('form').submit();
            } else {
                 console.log(msg);
            }

        }).fail(function() {
            // Catch ajax errors here
            console.log('AJAX error');
        });
    });                                                         
});

PHP:

$post = (!empty($_POST)) ? true : false;
if ($post) {
  $orderid = stripslashes($_POST['orderid']);
  $amount = stripslashes($_POST['amount']);
  $betingelser = stripslashes($_POST['betingelser']);
  $error = ''; // Check ordreid
  if (!$orderid) {
    $error. = 'Venligst indtast dit ordreid.<br />';
  } // Check amount
  if (!$amount) {
    $error. = 'Venligst indtast et beløb.<br />';
  }
  if (!$error) {
    echo 'OK';
  } else {
    echo '<div class="notification_error">'.$error.
    '</div>';
  }
}

Can anyone tell me what wrong?

Answer 1

You're in the click handler of a submit button. You're calling $(this).serialize() , where this is that submit button. Calling serialize on the submit button is going to return an empty string.

So, you're not passing any data to the server. The first thing you do server-side is check empty($_POST) , which it will be , so if ($post) is false, and none of your server-side code is eve executed.

You need to serialize the form , not the submit button.

A simple solution would be to serialize the form itself....

str = $('"#ajax-payment-form').serialize()

but really, the larger problem is that you're binding to the click of the submit button, instead of to the submit event on the form itself.

Instead of this rather convoluted way of handling form submits...

$("#ajax-payment-form input[type='submit']").click(function(e) {

Just do this:

$("#ajax-payment-form").submit(function (e) {

Answer 2

try this in jquery:

$.ajax({
type: "POST",
url: templateDir+"/payment_form/payment_process.php",
data: str,
context: this,
success: function(msg){
if(msg == 'OK') {
    console.log('Validation passed, will submit form');
    $(this).closest('form').submit();
    } 
else {
    console.log(msg);
}
}
error: function(msg){
// if call fails or any error occurs
}
});