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并注意如果页面很长，不会感觉表单是实时处理（而不是刷新）。就像我说的那样，老实说，我只是希望提供更好的用户体验并增添趣味。

更新

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 website以获取有关JSON的更多信息。

Answer 3

As per documentation，.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
}

Ajax处理PHP表单，具有来自多个条件的不同结果

3 个答案: