Контактная форма AngularJS PHP

#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);

}