2013-01-10 103 views
0

我有這樣的代碼提交表單:AJAX JSON形式提交

的index.php

<html> 
    <head> 
     <title>My Form</title> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

     <script type="text/javascript"> 

      $(document).ready(function(){ 

       $("#myForm").submit(function(){ 
        var tvyalner = $("#myForm").serialize(); 
        $.ajax({ 
         type: "POST", 
         url: "postForm.ajax.php", 
         data: tvyalner, 
         dataType: "json", 

         success: function(data){ 
          $("#formResponse").removeClass('error'); 
          $("#formResponse").addClass(data.status); 
          $("#formResponse").html(data.message); 
          if(data.status === 'success'){$("#myForm table").hide();} 
         }, 
         error: function(){ 
        $("#formResponse").removeClass('success'); 
        $("#formResponse").addClass('error'); 
        $("#formResponse").html("There was an error submitting the form. Please try again."); 
         } 
        }); 

        //make sure the form doens't post 
        return false; 


       }); 


      }); 
     </script> 

     <style type="text/css"> 

      .success{ 

       border: 2px solid #009400; 
       background: #B3FFB3; 
       color: #555; 
       font-weight: bold; 

      } 

      .error{ 

       border: 2px solid #DE001A; 
       background: #FFA8B3; 
       color: #000; 
       font-weight: bold; 
      } 
     </style> 

    </head> 
    <body> 
<div class="mfm"> 
    <form id="myForm" name="myForm" method="post" action="" style="margin: 0 auto; width: 300px;"> 

     <div id="formResponse"></div> 

     <table> 

      <tr><td>Name:</td><td><input name="name" type="text" value=""></td></tr> 
      <tr><td>Email:</td><td><input name="email" type="text" value=""></td></tr> 
      <tr><td>Message:</td><td><textarea name="message" rows="5" cols="20"></textarea></td></tr> 
      <tr><td>&nbsp;</td><td><input type="submit" name="submitForm" value="Submit Form"></td></tr> 

     </table> 

    </form> 
</div> 
    </body> 
</html> 

postForm.ajax.php

<?php 

//function to validate the email address 
//returns false if email is invalid 
function checkEmail($email){ 

    if(eregi("^[a-zA-Z0-9_][email protected][a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$]", $email)){ 
     return FALSE; 
    } 

    list($Username, $Domain) = split("@",$email); 

    if(@getmxrr($Domain, $MXHost)){ 
     return TRUE; 

    } else { 
     if(@fsockopen($Domain, 25, $errno, $errstr, 30)){ 
      return TRUE; 
     } else { 

      return FALSE; 
     } 
    } 
} 



//response array with status code and message 
$response_array = array(); 

//validate the post form 

//check the name field 
if(empty($_POST['name'])){ 

    //set the response 
    $response_array['status'] = 'error'; 
    $response_array['message'] = 'Name is blank'; 

//check the email field 
} elseif(!checkEmail($_POST['email'])) { 

    //set the response 
    $response_array['status'] = 'error'; 
    $response_array['message'] = 'Email is blank or invalid'; 

//check the message field 
} elseif(empty($_POST['message'])) { 

    //set the response 
    $response_array['status'] = 'error'; 
    $response_array['message'] = 'Message is blank'; 


//form validated. send email 
} else { 

    //send the email 
    $body = $_POST['name'] . " sent you a message\n"; 
    $body .= "Details:\n\n" . $_POST['message']; 
    mail($_POST['email'], "SUBJECT LINE", $body); 

    //set the response 
    $response_array['status'] = 'success'; 
    $response_array['message'] = 'Email sent!'; 

} 


echo json_encode($response_array); 

?> 

後先提交顯示:

名稱爲空。

填充字段,並重新提交。顯示

出現錯誤提交表單。請再試一次。

,這一切。

代碼在本地主機不工作。

什麼問題?

+0

那麼,是不是工作在localhost或沒有? (那種令人困惑的......) –

+0

對不起更正:) –

回答

1

我建議使用這個誤差函數,看看有什麼錯誤是:

$.ajax({ 
    /* ... */ 
    error: function(jqXHR, textStatus, errorThrown){ 

     console.log(errorThrown); // Or use alert() 
     console.log(textStatus); 

     $("#formResponse").removeClass('success'); 
     $("#formResponse").addClass('error'); 
     $("#formResponse").html("There was an error submitting the form. Please try again."); 
    } 
}); 
+0

對不起,我是Jquery和Ajax的新手,在哪裏我必須看到錯誤? –

+0

textStatus:parsererror –

+0

解決:因爲deprected函數eregi ... –