angularjs — получение данных ответа PHP AJAX с помощью службы Angular $ http
Мне жаль, если это повторяет предыдущие вопросы, но я не смог найти решение, которое, кажется, работает с моей проблемой & Я новичок в Angular.
У меня есть форма Angular, которая связывает данные с PHP для отправки электронной почты, и моя проблема заключается в обработке ответа JSON от PHP (так как PHP сообщает, успешно ли он выполнен в самом JSON, вместе с сообщением).
Кажется, я не могу заставить код отвечать на основании значения «success», содержащегося в JSON, и фактически не отображать «message».
Данные ответов JSON выглядят следующим образом (когда происходит сбой из-за проблемы с электронной почтой):
Таким образом, мой угловой код должен отвечать на основании «успеха», являющегося истинным или ложным, и в то же время отображать «сообщение», которое передается AJAX в JSON.
Код моего углового контроллера:
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;
$scope.submit = function(contactform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
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' }
});
if (request.success) {
console.log(request);
$scope.submitButtonDisabled = false;
$scope.result='bg-success';
$scope.resultMessage = request.message;
} else {
$scope.submitButtonDisabled = true;
$scope.resultMessage = request.message;
//$scope.resultMessage = "Opps!... something went wrong. Please Contact OpenHouse directly to let them know of this error.";
$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(!$mail->send()) {
echo json_encode(['success' => false, 'message' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo]);
exit;
}
error_log("Data: ".$data['success']." Message: ".$data['message']);
echo json_encode(['success' => true, 'message' => 'Thanks! We have received your message.']);
} else {
echo json_encode(['success' => false, 'message' => 'Please fill out the form completely.']);
}
?>
Решение
Для начала $ http не возвращает request объект, он возвращает обещание, которое разрешается с response объект:
//var request = $http({
//It returns a promise
var promise = $http({
method : 'POST',
url : 'php/contact.php',
data : $.param($scope.formData), //param method from jQuery
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
});
//Use .then method to receive response
promise.then(function (response) {
var request = response.data;
if (request.success) {
console.log(request);
$scope.submitButtonDisabled = false;
$scope.result='bg-success';
$scope.resultMessage = request.message;
}
});
Важно понимать, что служба $ http немедленно возвращает в ожидании Обещаю. Обещание потом разрешено (выполнено или отклонено), когда ответ возвращается с сервера.
Использовать .then метод обещания предоставить обработчики успеха и отклонения, которые разрешают либо с выполненным, либо с отклоненным ответом.
Для получения дополнительной информации см .: Справочник по API службы AngularJS $ http — общее использование
ОБНОВИТЬ
Платформа AngularJS по умолчанию кодирует и публикует сообщения, используя Content-Type: 'application/json',
Чтобы получить данные JSON в бэкэнде PHP, сделайте что-то вроде:
$json = file_get_contents('php://input');
$obj = json_decode($json);
Тогда POST с AngularJS можно упростить:
var promise = $http({
method : 'POST',
url : 'php/contact.php',
//data : $.param($scope.formData), //param method from jQuery
data: $scope.data;
//headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
//Defaults to:
//headers: {'Content-Type': 'application/json'}
});
//Use .then method to receive response
promise.then(function (response) {
var request = response.data;
if (request.success) {
console.log(request);
$scope.submitButtonDisabled = false;
$scope.result='bg-success';
$scope.resultMessage = request.message;
}
});
Другие решения
Спасибо всем за помощь;
Я смог вернуть ответ после асинхронного вызова http & показать его на экране …
Но независимо от того, что я пытался, он всегда упаковывает заголовки HTTP с данными в ответе на данные.
Если PHP не отправил электронное письмо (я удалил все команды для отправки электронной почты), тогда ответом на данные были бы просто данные.
Если PHP действительно отправит электронное письмо, то ответом будут HTTP-заголовки + данные в ответе на данные.
Итак, в конце на угловой стороне, я преобразовал ответ данных в строку, разделив эту строку на основе { который дал бы мне новую строку только с данными (и без заголовков), некоторые дополнительные \отделяя значения в строке, и, очевидно, и заканчивая }
Таким образом, благодаря манипуляции со строками, я смог получить ответ, который хотел.
Вот рабочий угловой контроллер:
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;
$scope.submit = function(contactform) {
$scope.submitted = true;
$scope.submitButtonDisabled = true;
var promise = $http({
method : 'POST',
url : 'php/contact.php',
data : {
firstname: $scope.formData.inputFirstName,
lastname: $scope.formData.inputLastName,
emailid: $scope.formData.inputEmail,
phoneno: $scope.formData.inputPhone,
message: $scope.formData.inputMessage
},
headers : {'Content-Type': 'application/json'}
})
promise.then(function (response) {
var request = JSON.stringify(response.data); //convert JSON data to string for manipulation
var startpos = request.indexOf("{"); //locate '{' as its the start of the data we want
var endpos = request.lastIndexOf("}"); //locate '}' as its the end of the data we want
var res = request.slice(startpos, endpos); //Extract the actual data now we know where it is.
var newresponse = res.split("\\"); //Split the data into new array
var answer = request.search("true"); //search the string to see if it contains the word "true" meaning an email was sent.
if (answer >= 0) {
$scope.submitButtonDisabled = false;
$scope.result='bg-success';
$scope.resultMessage = newresponse[5].replace('"', " ");
} else {
$scope.submitButtonDisabled = true;
$scope.resultMessage = newresponse[5].replace('"', " ");
$scope.result='bg-danger';
}
});
}
});