2014-03-07 105 views
0

我现在有了一个工作形式的Ajax处理PHP形式,现在只是用一个条件,以检查它是否已提交和处理在同一页上的形式为:https://gist.github.com/adrianrodriguez/48cd90067a63691adc6a与来自多个条件语句不同的结果

但很明显需要注意的是它会刷新页面。这在现实中是好的,我只是用JS来淡入一点点形式回声之后的结果与

style="display:none" 

这就是八九不离十罚款...但我想香料它和使用AJAX。

下面是没有Ajax(只使用validation.js用于验证)

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与阵列(我认为我做错了,我尝试三种不同的方式,所有失败的小白风格)。

<?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 <[email protected]>'; 

     $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("[email protected]", "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); 
?> 
+0

如果你为什么一个单独的页面形式它的处理上使用Ajax?我读到,当你提交数据到一个页面,然后在刚刚提交数据的页面上进行Ajax调用,对吗? – Styphon

+0

@Styphon,我不知道我理解你的问题。当我尝试通过ajax处理表单并且表单处于同一页面时失败。对于以前的项目,我的表单总是与它处理的页面分开并且工作正常。 ***(没有这个功能我要求)*** –

+0

好吧,我现在明白了。 @TomToms的答案是,虽然缺乏细节,但你在寻找什么。 – Styphon

回答

1

正如@TomToms在上面发布的问题所述,您需要将结果从Ajax页面调用回来,即一个处理。如前所述,您可以使用JSON数组来执行此操作。我会给你这个下面一个简单的例子:

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

注意添加的数据类型,这阐明你期待JSON字符串回,并将其转换成一个数组中data你。如果您在控制台中看到最终data会随着它的奖金和状态的对象

// ... 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); 

现在:

在你处理页面,则form.action你会有这个。

我还建议您通过JSON website查看有关JSON的更多信息。

+0

它是否必须是一个数组?它可能只是$ string ='String';回声json_encode($字符串); ? –

+0

'json_encode($ string)'会产生'String'。虽然你可以做到这一点,但毫无意义。 json_encode的要点是将数组转换为字符串。您需要更新两个区域,不能使用单个字符串更新这两个区域,因此您需要使用JSON。 – Styphon

+0

感谢您与我交流至今,并请继续原谅我在JSON方面的经验不足。我阅读了文档,然后阅读了一些其他的PHP到JSON线程,并尝试了一些没有结果的东西。我想知道我是否做错了。我是否需要将条件转换为数组,然后使用json_encode回显消息? –

1

如果我理解你的问题正确的,你需要的是发回一个JSON阵列的每个字段或沿着这些线路的东西的状态码,然后解析,在你的JavaScript适当地向用户发出警告。

+0

您可以详细说明一些可能的代码示例吗?我以前没有碰过JSON,可以使用一些指导。 –

0

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 
}