#php #forms #angularjs
#php #формы #angularjs
Вопрос:
Эта контактная форма была проклятием моего существования уже около недели, любая помощь была бы большой.
Мой сервер и контроллер настроены таким образом, что они будут получать мои php-данные и, надеюсь, обрабатывать их через php при отправке формы.
Кажется, что контроллер правильно отправляет данные, и что они получены proccess.php
, мои журналы express, nginx и т.д. Подтверждают, что все выглядит нормально; данные, похоже, также отправляются нормально; проблема, похоже, в моем PHP.
Я настроил ее для запроса данных и возврата массива JSON, подтверждающего успех, и последующей отправки данных по почте; или сообщения о сбое; и по какой-то причине кажется, что каждый раз происходит сбой.
вот мой контроллер:
mainControllers.controller('ContactCtrl', function ($scope, $http) {
$scope.formData;
$scope.processForm = function() {
console.log('Im in the controller');
console.log($scope.formData);
$http({
method : 'POST',
url : '/process.php',
data : $.param($scope.formData),
headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function(formData) {
console.log(formData);
if (formData.success) {
console.log('Success');
} else {
console.log('Fail');
}
});
};
});
мой php:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once 'phpmailer/PHPMailerAutoload.php';
if (isset($_POST['inputName']) amp;amp; isset($_POST['inputEmail']) amp;amp; isset($_POST['inputPhone']) amp;amp; isset($_POST['inputMessage'])) {
//check if any of the inputs are empty
if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty($_POST['inputPhone']) || empty($_POST['inputMessage'])) {
$formData = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($formData);
exit;
}
//create an instance of PHPMailer
$mail = new PHPMailer();
$mail->From = $_POST['inputEmail'];
$mail->FromName = $_POST['inputName'];
$mail->AddAddress('something@test.com'); //recipient
$mail->Subject = $_POST['inputName'];
$mail->Body = "Phone: " . $_POST['inputPhone'] . "rnrnMessage: " . stripslashes($_POST['inputMessage']);
if (isset($_POST['ref'])) {
$mail->Body .= "rnrnRef: " . $_POST['ref'];
}
if(!$mail->send()) {
$formData = array('success' => false, 'message' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo);
echo json_encode($formData);
exit;
}
$formData = array('success' => true, 'message' => 'Thanks! We have received your message.');
echo json_encode($formData);
} else {
$formData = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($formData);
}
и html:
<form id="myform" name="myForm" data-abide role="form" ng-submit="processForm()">
<div class="formData.inputName-field">
<label>Your name <small>required</small>
<input type="text" name="formData.inputName" id="formData.inputName" required pattern="[a-zA-Z] " ng-model="formData.inputName">
</label>
<small class="error">Name is required.</small>
</div>
<div class="formData.inputEmail-field">
<label>Email <small>required</small>
<input type="email" name="formData.inputEmail" id="formData.inputEmail" required ng-model="formData.inputEmail">
</label>
<small class="error">An email address is required.</small>
</div>
<div class="formData.inputPhone-field">
<label>Phone #
<input type="text" name="formData.inputPhone" id="formData.inputPhone"required pattern="^([0-9]( |-)?)?((?[0-9]{3})?|[0-9]{3})( |-)?([0-9]{3}( |-)?[0-9]{4}|[a-zA-Z0-9]{7})$" ng-model="formData.inputPhone">
</label>
<small class="error">Please enter your number in the format '123-456-7890'.</small>
</div>
<div class="formData.inputMessage-field">
<label>Message
<textarea name="formData.inputMessage" id="formData.inputMessage" ng-model="formData.inputMessage"></textarea> </label></div>
<button type="submit" class="columns small-centered">Submit</button>
<div class="panel">
<p>{{formData}}</p>
<p>{{codeStatus}}</p>
</div>
</form>
Комментарии:
1. И где именно происходит сбой? Как выглядит ответ?
2. Я добавил несколько журналов, чтобы попытаться точно определить проблему, один вызывается в контроллере по адресу
if (formData.success) { console.log('Success'); } else { // if successful, bind success message to message console.log('Fail'); }
, другой находится в файле php по адресуelse { $formData = array('success' => false, 'message' => 'Please fill out thsdffe form completely.'); echo json_encode($formData); }
3.Таким образом, в блоке .success(функция(FormData), а также во втором
$formData =
блоке php… Кроме того, я попытался поработать с php, чтобы избавиться от проверки, и увидел «пустую строку» (я полагаю, что это было сообщение»..Вот экраны консоли, показывающие вкладки ответа и публикации соответственно; gyazo.com/6046ac608bd42ef4b8797950cf69f1e6 gyazo.com/5188e4b02a2aba85b14193b23e062b9f кажется, что данные размещены правильно, но кажется, что PHP интерпретирует FormData не так, как предполагалось.4. Попробуйте
var_dump($_POST)
. На что это похоже?5. изменение моего php-файла на
<?php var_dump($_POST);
приводитarray(0) { }
Ответ №1:
Как вы сказали, кажется, что это работает нормально, но по какой-то причине функция fail вызывается каждый раз.
Если вы посмотрите на свой код, вы вызовете функцию $ http.success, и внутри нее у вас снова будет проверка на успех.
Поскольку вы, скорее всего, хотите проверить правильность возврата из ответа $ http, вам следует использовать функции .success и .error непосредственно в $ http, а не внутри $ http.success . Взгляните на это:
$http({method: 'GET', url: '/someUrl'}).
success(function(data, status, headers, config) {
// this callback will be called asynchronously
// when the response is available
}).
error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
Итак, попробуйте переместить свой код сбоя из функции .success в функцию .error и посмотрите, как это получится.
Для дальнейшего чтения: проверьте https://docs.angularjs.org/api/ng/service $http
Комментарии:
1. Поскольку они всегда возвращаются
status 200
с сервера, это не поможет решить проблему. Это хорошая идея для обнаружения ошибок (например, когда сервер может быть отключен или сетевое соединение потеряно), но это не имеет никакого отношения к проблеме в вопросе.2. Я вижу, извините, похоже, я неправильно это понял
3. Спасибо за ввод @ChrisPreston вероятно, хорошая идея следовать этому формату в целом, но, к сожалению, проблема, похоже, заключается в PHP, по крайней мере, на это указывают все признаки на данный момент
Ответ №2:
удалите окружающий оператор if else. Есть еще одна проблема: не загружается класс PHPMailer.
Ответ №3:
Для всех, кому все еще интересно, мне пришлось настроить express для правильной обработки PHP с помощью php-express, вот так:
var phpExpress = require('php-express')({
binPath: '/usr/bin/php' // php bin path.
});
module.exports = function(app) {
app.engine('php', phpExpress.engine);
app.set('view engine', 'php');
app.all(/. .php$/, phpExpress.router);
};
Затем в моем контроллере я смог передавать данные формы с:
«использовать строго»;
angular.module('contactApp')
.controller('ContactCtrl', function ($scope, $http, $state) {
$scope.formData;
$scope.processForm = function() {
$http({
method : 'POST',
url : '/process.php',
data : $.param($scope.formData), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
}).success(function(formData) {
console.log(formData);
$state.go('success');
}).error(function(formData){
if (formData.success) {
console.log('Success');
} else {
console.log('Fail');
$state.go('contact_err');
}
});
};
});
и process.php это выглядит как:
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
require_once 'phpmailer/PHPMailerAutoload.php';
if (isset($_POST['inputName']) amp;amp; isset($_POST['inputEmail']) amp;amp; isset($_POST['inputPhone']) amp;amp; isset($_POST['inputMesage'])) {
//check if any of the inputs are empty
if (empty($_POST['inputName']) || empty($_POST['inputEmail']) || empty($_POST['inputPhone']) || empty($_POST['inputMesage'])) {
$formData = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($formData);
exit;
}
//create an instance of PHPMailer
$mail = new PHPMailer();
$mail->isSMTP();
//Enable SMTP debugging
// 0 = off (for production use)
// 1 = client messages
// 2 = client and server messages
$mail->SMTPDebug = 0;
//Ask for HTML-friendly debug output
$mail->Debugoutput = 'html';
//Set the hostname of the mail server
$mail->Host = 'email.host.com';
//Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP submission
$mail->Port = 587;
//Set the encryption system to use - ssl (deprecated) or tls
$mail->SMTPSecure = 'tls';
//Whether to use SMTP authentication
$mail->SMTPAuth = true;
//Username to use for SMTP authentication - use full email address for gmail
$mail->Username = "email@sender.com";
//Password to use for SMTP authentication
$mail->Password = "passwordredacted";
$mail->setFrom = $_POST['inputEmail'];
$mail->addAddress('example@recipient.com'); //recipient
$mail->Subject = $_POST['inputName'];
$mail->Body = "Name: " . $_POST['inputName'] . "rnrnMessage: " . stripslashes($_POST['inputMesage']) . "rnrnPhone: " . stripslashes($_POST['inputPhone']) . "rnrnEmail: " . stripslashes($_POST['inputEmail']);
if (isset($_POST['ref'])) {
$mail->Body .= "rnrnRef: " . $_POST['ref'];
}
if(!$mail->send()) {
$formData = array('success' => false, 'message' => 'Message could not be sent. Mailer Error: ' . $mail->ErrorInfo);
echo json_encode($formData);
exit;
}
$formData = array('success' => true, 'message' => 'Thanks! We have received your message.');
echo json_encode($formData);
} else {
var_dump($_POST);
$formData = array('success' => false, 'message' => 'Please fill out the form completely.');
echo json_encode($formData);
}