我是新來Angular/Bootstrap開發,並且我的網站上有一個聯繫表單,它使用Angular控制器對發送電子郵件的PHP文件進行AJAX調用。角度控制器不顯示消息
雖然這一切都有效〜AJAX呼叫&發送電子郵件,它應該在屏幕上顯示一個警告欄,並帶有一些文本。出於某種原因,它只顯示「bg-danger」欄(成功時應該顯示bg-ssuccess欄),並且從不顯示文本信息。
我的聯繫表HTML:
<div class="container" ng-controller="ContactController">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post" role="form" ng-submit="submit(contactform)" name="contactform">
<fieldset>
<legend class="text-center header">Send us a Message</legend>
<div class="form-group" ng-class="{ 'has-error': contactform.inputFirstName.$invalid && submitted }">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<!--<input id="firstname" name="firstname" type="text" placeholder="First Name" required="required" class="form-control">-->
<input ng-model="formData.inputFirstName" type="text" class="form-control" id="inputFirstName" name="inputFirstName" placeholder="First Name" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputLastName.$invalid && submitted }">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<!--<input id="lastname" name="lastname" type="text" placeholder="Last Name" required="required" class="form-control">-->
<input ng-model="formData.inputLastName" type="text" class="form-control" id="inputLastName" name="inputLastName" placeholder="Last Name" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
<div class="col-md-8">
<!--<input id="emailid" name="emailid" type="text" placeholder="Email Address" required="required" class="form-control">-->
<input ng-model="formData.inputEmail" type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Email Address" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputPhone.$invalid && submitted }">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
<div class="col-md-8">
<!--<input id="phone" name="phone" type="text" placeholder="Phone" required="required" class="form-control">-->
<input ng-model="formData.inputPhone" type="tel" class="form-control" id="inputPhone" name="inputPhone" placeholder="Phone" required>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
<div class="col-md-8">
<!--<textarea class="form-control" id="message" name="message" required="required" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea>-->
<textarea ng-Model="formData.inputMessage" class="form-control" id="inputMessage" name="inputMessage" placeholder="Enter your message for us here. We will get back to you shortly..." rows="7" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg" ng-disabled="submitButtonDisabled">Submit</button>
</div>
</div>
</fieldset>
<p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
</form>
</div>
</div>
</div>
</div>
我的角度控制器:
var app = angular.module("myApp", ["ngRoute", "ngAnimate", "ngCsv"]);
app.config(function ($routeProvider) {
$routeProvider.when("/", {
templateUrl: "templates/home.html"
}).when("/contact", {
controller: 'ContactController',
templateUrl: "templates/contact.html"
})
});
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 : 'php/contact.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 = false;
$scope.result='bg-success';
$scope.resultMessage = data.message;
//$scope.result='alert alert-success';
} else {
$scope.submitButtonDisabled = true;
$scope.resultMessage = data.message;
$scope.result='bg-danger';
}
});
} else {
$scope.submitButtonDisabled = false;
$scope.resultMessage = 'Failed <img src="http://www.chaosm.net/blog/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> Please fill out all the fields.';
$scope.result='bg-danger';
}
}
});
我的PHP代碼在服務器端發送電子郵件。
<?php
require_once ("class.phpmailer.php"); // Include phpmailer class
ini_set('display_errors', 'On');
error_reporting(E_ALL | E_STRICT);
if (isset($_POST['inputFirstName']) && isset($_POST['inputLastName']) && isset($_POST['inputEmail']) && isset($_POST['inputPhone']) && isset($_POST['inputMessage'])) {
//check if any of the inputs are empty
if (empty($_POST['inputFirstName']) || empty($_POST['inputLastName']) || empty($_POST['inputEmail']) || empty($_POST['inputPhone']) || empty($_POST['inputMessage'])) {
$data = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($data);
exit;
}
$message=
'First Name: '.$_POST['inputFirstName'].'<br />
Last Name: '.$_POST['inputLastName'].'<br />
Phone: '.$_POST['inputPhone'].'<br />
Email: '.$_POST['inputEmail'].'<br />
Comments: '.$_POST['inputMessage'].'
';
$mail = new PHPMailer(); // Instantiate the PHPMailer Class
$mail->IsSMTP(); // enable SMTP
$mail->SMTPDebug = 1; // debugging: 1 = errors and messages, 2 = messages only
$mail->SMTPAuth = true; // SMTP authentication enabled
$mail->SMTPSecure = 'ssl'; // secure transfer enabled + REQUIRED for Gmail (either SSL or TLS)
$mail->Host = "smtp.gmail.com"; //Gmail SMTP Server to relay thru
$mail->Port = 465; // Port 465 as we're using SSL... or use Port 587 for TLS
$mail->IsHTML(true); // We're sending a HTML formatted message
$mail->Username = "*****@gmail.com"; // Gmail account for authentication
$mail->Password = "*********"; // Gmail password for authentication
$mail->SetFrom("*****@gmail.com"); // The email is being sent from this address
$mail->Subject = "Website Contact Form Enquiry"; // The subject line of the email
$mail->Body = ($message); // The actual email message to be sent
$mail->AddAddress("*****@gmail.com"); // The email is being sent to this address
//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.');
error_log("Data: ".$data['success']." Message: ".$data['message']);
echo json_encode($data);
//error_log("Data: ".$data['success']);
} else {
$data = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($data);
}
?>
**更新 - 問題出現在Angular方面,我將控制器更改爲此代碼,但現在它始終成功。此外,不管我怎麼努力,而控制檯日誌顯示就是它從PHP收到消息,它從來沒有顯示消息:
if (contactform.$valid) {
var request = $http({
method : 'POST',
url : 'php/contact.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)
});
if (request.success) { //success comes from the return json object
console.log(request);
$scope.submitButtonDisabled = false;
$scope.result='bg-success';
$scope.resultMessage = "'Thanks!... We have received your message, and will be in contact shortly"
} else {
$scope.submitButtonDisabled = true;
$scope.resultMessage = "Opps!... something went wrong. Please Contact OpenHouse directly to let them know of this error.";
$scope.result='bg-danger';
};
//);
是數據。成功工作?現在它不顯示消息,所以我假設data.success不正確 –
在PHP方面,我已經記錄了輸出和成功是'真'。 但是,即使我修改PHP(所以它會失敗發送電子郵件),我仍然得到相同的酒吧,沒有消息顯示。 - 所以我假設問題與Angular方面,但不知道在哪裏。 – BlissSol
編輯 - 當iive登錄PHP端時,數組中的'success'= 1(當它成功發送郵件時)。 我假設它的工作是一個布爾真/假(?) – BlissSol