2015-11-04 85 views
0

我試圖複製此表格http://sunzhen.blogspot.com/2014/08/angularjs-contact-form-with-bootstrap.html,並且能夠獲取要發送的電子郵件,但沒有從contact-form.php文件獲取錯誤和成功消息。我必須改變文件結構以適應我的網站,但這不應該影響任何東西。我發現使用Angular 1.2.16就像他們正在使用的那樣,我得到了成功的消息,但是當使用最新版本的Angular時,我不這麼做。任何人都可以告訴新版本的Angular中是否發生了一些會導致這種行爲的事情? 下面是代碼http://plnkr.co/edit/Skj5r6WFfDQajkPuyzxT無法使{{success message}}出現在Angular中

<?php 
error_reporting(E_ALL); 
ini_set('display_errors', '1'); 
require_once 'phpmailer/PHPMailerAutoload.php'; 

if (isset($_POST['inputName']) && isset($_POST['inputEmail']) && isset($_POST['inputSubject']) && isset($_POST['inputMessage'])) { 

    //check if any of the inputs are empty 
    if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty($_POST['inputSubject']) || empty($_POST['inputMessage'])) { 
     $data = array('success' => false, 'message' => 'Please fill out the form completely.'); 
     echo json_encode($data); 
     exit; 
    } 

    //create an instance of PHPMailer 
    $mail = new PHPMailer(); 

    $mail->From = $_POST['inputEmail']; 
    $mail->FromName = $_POST['inputName']; 
    $mail->AddAddress('[email protected]'); //recipient 
    $mail->Subject = $_POST['inputSubject']; 
    $mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\nMessage: " . stripslashes($_POST['inputMessage']); 

    if (isset($_POST['ref'])) { 
     $mail->Body .= "\r\n\r\nRef: " . $_POST['ref']; 
    } 

    if(!$mail->send()) { 
     $data = array('success' => false, 'message' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo); 
     echo json_encode($data); 
     exit; 
    } 

    $data = array('success' => true, 'message' => 'Thanks! We have received your message.'); 
    echo json_encode($data); 

} else { 

    $data = array('success' => false, 'message' => 'Please fill out the form 

completely.'); 
     echo json_encode($data); 

    }   

controller.js

app.controller('ContactController', function ($scope, $http) { 
$scope.result = 'hidden' 
$scope.resultMessage; 
$scope.formData; //formData is an object holding the name, email, subject, and message 
$scope.submitButtonDisabled = false; 
$scope.submitted = false; //used so that form errors are shown only after the form has been submitted 
$scope.submit = function(contactform) { 
    $scope.submitted = true; 
    $scope.submitButtonDisabled = true; 
    if (contactform.$valid) { 
     $http({ 
      method : 'POST', 
      url  : 'contact-form.php', 
      data : $.param($scope.formData), //param method from jQuery 
      headers : { 'Content-Type': 'application/x-www-form-urlencoded' } //set the headers so angular passing info as form data (not request payload) 
     }).success(function(data){ 
      console.log(data); 
      if (data.success) { //success comes from the return json object 
       $scope.submitButtonDisabled = true; 
       $scope.resultMessage = data.message; 
       $scope.result='bg-success'; 
      } else { 
       $scope.submitButtonDisabled = false; 
       $scope.resultMessage = data.message; 
       $scope.result='bg-danger'; 
      } 
     }); 
    } else { 
     $scope.submitButtonDisabled = false; 
     $scope.resultMessage = 'Failed :(Please fill out all the fields.'; 
     $scope.result='bg-danger'; 


    } 
    } 
}); 

HTML

<!DOCTYPE html> 
<html> 

<head> 
    <title>AngularJS Contact Form with Bootstrap and PHPMailer</title> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
    <script src="app.js"></script> 
    <script src="controllers.js"></script> 
</head> 

<body ng-app="contactApp"> 
    <div class="vertical-middle"> 
    <div class="container"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h2 class="panel-title">Contact Form</h2> 
     </div> 
     <div ng-controller="ContactController" class="panel-body"> 
      <form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form"> 
      <div class="form-group" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }"> 
       <label for="inputName" class="col-lg-2 control-label">Name</label> 
       <div class="col-lg-10"> 
       <input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="Your Name" required="" /> 
       </div> 
      </div> 
      <div class="form-group" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }"> 
       <label for="inputEmail" class="col-lg-2 control-label">Email</label> 
       <div class="col-lg-10"> 
       <input ng-model="formData.inputEmail" type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email" required="" /> 
       </div> 
      </div> 
      <div class="form-group" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }"> 
       <label for="inputSubject" class="col-lg-2 control-label">Subject</label> 
       <div class="col-lg-10"> 
       <input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required="" /> 
       </div> 
      </div> 
      <div class="form-group" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }"> 
       <label for="inputMessage" class="col-lg-2 control-label">Message</label> 
       <div class="col-lg-10"> 
       <textarea ng-model="formData.inputMessage" class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." required=""></textarea> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-lg-offset-2 col-lg-10"> 
       <button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled"> 
        Send Message 
       </button> 
       </div> 
      </div> 
      </form> 
      <p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</body> 

</html> 
+1

我無法弄清楚了,但你可以去看看[關於遷移文檔(https://docs.angularjs.org/guide/migration):) – Rodmentou

+0

好吧,我會做感謝 – jfoutch

+0

需要改變這一行$ scope.resultMessage = data.data.message;而不是$ scope.resultMessage = data.message; – Shohel

回答

0

其實,你會得到什麼從回調response包括頭的細節。嘗試這個。

 ......... 
     }).success(function(response){ 
      console.log(response); 
      if (response.data.success) { 
       $scope.submitButtonDisabled = true; 
       $scope.resultMessage = response.data.message; 
       $scope.result='bg-success'; 
      } else { 
       $scope.submitButtonDisabled = false; 
       $scope.resultMessage = response.data.message; 
       $scope.result='bg-danger'; 
      } 
     .......... 
+0

謝謝,我很快就會在此嘗試 – jfoutch

+0

進行此更改後沒有任何更改。你是否能夠在闖入者中工作? – jfoutch

0

你需要糾正你的電子郵件發送代碼到php。我認爲它有一些錯誤。如果你確定你會得到一個結果。你的修正看起來像這樣。我添加了一個錯誤處理程序方法。

$http({ 
     method: 'POST', 
     url: 'contact-form.php', 
     data: $.param($scope.formData), //param method from jQuery 
     headers: { 
      'Content-Type': 'application/x-www-form-urlencoded' 
     } //set the headers so angular passing info as form data (not request payload) 
     }).success(function(data) { 
     console.log(data); 
     if (data.success) { //success comes from the return json object 
      $scope.submitButtonDisabled = true; 
      $scope.resultMessage = data.data.message; 
      $scope.result = 'bg-success'; 
     } else { 
      $scope.submitButtonDisabled = false; 
      $scope.resultMessage = data.data.message; 
      $scope.result = 'bg-danger'; 
     } 
     }).error(function(error, status) { 
     $scope.submitButtonDisabled = false; 
     $scope.resultMessage = 'Failed :(Please fill out all the fields.'; 
     $scope.result = 'bg-danger'; 
     }); 
+0

謝謝,但這並不適合我。刷新頁面後,我會看到「{{message}}」。 – jfoutch

+0

你是否修復了你的php代碼。郵件正在發送? – Shohel

相關問題