Ajax處理PHP表單，具有來自多個條件的不同結果

Question

我現在有一個工作表單，只是使用條件來檢查它是否已被提交並在同一頁面上處理表單： https ： //gist.github.com/adrianrodriguez/48cd90067a63691adc6a

但顯然需要注意的是它會刷新頁面。 實際上這很好，我只是使用了一點JS來淡化結果，然后回復它

style="display:none"

這很好......但是我想把它調味一下並使用ajax。

下面是沒有ajax的js（只是使用validation.js進行驗證）

JS 更新了答案

$(document).ready(function(){
    // Jquery Form Functions
    $('#redeem').validate( { // initialize the plugin
        rules: {
            fullname: {
                required: true
            },
            cardnumber: {
                required: true,
                digits: true
            },
            email: {
                email: true,
                required: true
            },
            confirmation: {
                email: true,
                required: true,
                equalTo: "#email"
            }
        },
        invalidHandler: function (event, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = "<p>All fields in red must be filled*</p>";
                $("#redeem .message").html(message);
                $("#redeem .message").show();
                } else {
                    $("#redeem .message").hide();
                }
            },
            submitHandler: function (form) { // for demo
                //form.submit();

              $.ajax({
                url: form.action,
                type: form.method,
                data: $(form).serialize(),
                dataType: "json", // Recognize JSON Data
                success: function(data) {
                    $.each(data, function(key, value) {
                        // Loop with key and value from conditional
                        console.log(key + " " + value); 
                    });
                }
              });
              return false;
            }
        });

    if ($('.result')) {
        $('.result').fadeIn(400);
    }
});

我知道如何使用ajax進行處理：

$.ajax({
    url: form.action,
    type: form.method,
    data: $(form).serialize(),
    success: function(data) {
        console.log(data);
    }
});
return false;

它工作正常，但我遇到的問題是當我想根據表單中的一些條件回應特定的字符串。

A）我無法回復信息，因為表單與其處理的頁面是分開的...

B）......我不知道如何將該信息提取到正在處理的當前頁面。

這甚至可能嗎？ 如果是這樣，怎么樣？ 或者我只需要繼續我現在所做的事情？

這是我現在工作的視頻（沒有ajax）： http ： //screencast.com/t/196P9ugso2L並注意如果一個頁面很長，它不會感覺表單正在被實時處理（而不是刷新）。 就像我說的那樣，老實說，我只是想提供更好的用戶體驗和增添趣味。

UPDATE

帶數組的PHP（我認為我做錯了，我嘗試了三種不同的方式，都是noob noob風格）。

    <?php

include('db-connect.php');

$fullname = $_POST['fullname'];
$email = $_POST['email'];
$cardnumber = $_POST['cardnumber'];

$select = "SELECT * FROM cardholders WHERE cardnumber = $cardnumber";

$selectfrom = mysql_query($select);

if ($info = mysql_fetch_assoc($selectfrom)) {

    if ($fullname == $info['name'] && $info['used'] == 0) {

        // To send HTML mail, the Content-type header must be set
        $headers  = 'MIME-Version: 1.0' . "\r\n";
        $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
        // $headers .= 'CC: $email' . "\r\n";
        $headers .= 'From: Comanche Nation Casinos <no-reply@comanchenationcasinos.com>';

        $confirmation = '<h1>Hi ' . $info['name'] . ' you\'ve won <b>$' . $info['amount'] . '</b> in Comanche Credit!</h1>
        <p>Thank you for being such a valuable C Club member. Print or Show this email and redeem this at your Comanche Nation Casino.</p>
        <p>Save this email just incase something happens so that the staff can ensure your reward at the kiosk.</p>';

        // mail("web@icgadv.com", "Care Center Gala Sponsorship Request", $staff, $headers);
        // mail($email, "Care Center Gala Sponsorship Request Confirmation", $confirmation, $headers);

        // $message = "<p>Congratulations!" . $info['name'] . "!</p> <p>You've won! Please check your email for your winnings and futher information.</p>";
        $winner = true;

        $message = array( 'winner' => true, 'message' => 'This is a test');

        $updateUser = "UPDATE cardholders SET email='$email', used=1 WHERE cardnumber = $cardnumber";

        $update = mysql_query($updateUser);

    } else if ($fullname != $info['name'] && $info['used'] == 0) {

        // $message = "Sorry but your name does not match the name in our database.";
        $noname = true;
        $message = array( 'winner' => true, 'message' => 'This is a test');

    } else {

        // $string = "<p>Sorry but this offer has already been redeemed to this account</p>";
        $redeemed = true;
        $message = array( 'winner' => true, 'message' => 'This is a test');

    }

    } else {
    // $message = array( 'status' => true, 'message' => "<p>Sorry but this card number    does not exist.</p>" );
    $invalid = true;
    $message = array( 'winner' => true, 'message' => 'This is a test');
    }

    echo json_encode($message);
?>

Answer 1

如果我正確理解你的問題你需要的是發回一個JSON數組，其中包含每個字段的狀態代碼或者這些行中的某些內容，然后在你的javascript中解析它以適當地警告用戶。

Answer 2

正如@TomToms上面發布的那個問題是你需要從Ajax頁面調用一個處理結果。 如前所述，您使用JSON數組執行此操作。 我將在下面給你一個簡短的例子：

$.ajax({
    url: form.action,
    type: form.method,
    data: $(form).serialize(),
    dataType: "json",
    success: function(data) {
        console.log(data);
    }
});

請注意添加的dataType，這表明您期望返回JSON字符串，並將其轉換為data的數組。

在您處理頁面時，您將擁有這樣的form.action ：

// ... code that loads form information and all your current processing.
$example = array(
    'prize'    => true, // true or false on whether they get the prize.
    'status'   => 'Show Status Message' // put any message for the show status box here.
);

echo json_encode($example);

現在，如果您在最后查看控制台， data將成為具有獎品和狀態的對象。

我還建議您瀏覽JSON網站以獲取有關JSON的更多信息。

Answer 3

根據文檔 ， .ajax()總是在submitHandler回調函數內部。

替換這個......

submitHandler: function (form) {  // fires on submit when form is valid  
    form.submit();  // regular submit action
}

有這樣的東西......

submitHandler: function (form) {  // fires on submit when form is valid 
    $.ajax({
        url: $(form).action,
        type: $(form).method,
        data: $(form).serialize(),
        success: function(data) {
            console.log(data);
        }
    });
    return false;  // block the default form action
}