PHP Angular JS 联系表不会发布

Question

我不断收到“请完整填写表格！”尝试发布到我的 php 表单时出错。

The error I get when I try to submit my contact form 这是我的角度

  var app = angular.module('app', ['ngRoute']);

    app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider
          .when('/home', {
            templateUrl: 'pages/partial.home.html',
            controller: 'homecontroller'
          })
          .when('/about', {
            templateUrl: 'pages/partial.about.html',
            controller: 'aboutcontroller'
          })
          .when('/services', {
            templateUrl: 'pages/partial.services.html',
            controller: 'servicecontroller'
          })
          .when('/contact', {
            templateUrl: 'pages/partial.contact.html',
            controller: 'contactcontroller'
          })
          .when('/portfolio', {
            templateUrl: 'pages/partial.portfolio.html',
            controller: 'portfoliocontroller'
          });

        /* .otherwise({
        templateUrl:'pages/partial.404.html'
       });*/

      }
    ]);
    app.controller('homecontroller', ['$scope', '$http',
      function($scope, $http) {
        $scope.title = 'About Us';
      }
    ]);

    app.controller('aboutcontroller', ['$scope', '$http',
      function($scope, $http) {
        $scope.title = 'About Us';

      }
    ]);
    app.controller('servicecontroller', ['$scope', '$http',
      function($scope, $http) {
        $scope.title = 'Our Services';

      }
    ]);
    app.controller('contactcontroller', ['$scope', '$http',
      function($scope, $http) {
        $scope.resultMessage;
        $scope.result = 'hidden';
        $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) {
            $http({
              method: 'POST',
              url: 'bin/contact_form.php',
              data: $.param($scope.formData), //param method from jQuery
              headers: {
                'Content-Type': 'application/x-www-form-urlenconded'
              }

            }).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 = 'Oops, Failed to send!';
            $scope.result = 'bg-danger';
          }
        }

      }
    ]);

    app.controller('portfoliocontroller', ['$scope', '$http',
      function($scope, $http) {
        $scope.title = 'Our portfolio';
  }
]);

这里是我的php代码

    <?php
error_reporting(E_ALL);
ini_set('display_errors', '0');
require 'class.phpmailer.php'; //include phpmailer



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;
    }
    $usermail = $_POST['inputEmail']; //get sender mail address
    $sender = $_POST['inputName']; // get sender Name
    $from  = "*@gmail.com"; //SMTP mail address
    $mail = new PHPMailer(); 
    $mail->IsSMTP(true);     // use SMTP ?
    $mail->IsHTML(false);   // use HTML emails ?
    $mail->SMTPAuth   = true;   // enable SMTP authentication
    $mail->SMTPSecure = 'ssl'; // secure transfer enabled
    $mail->Host       = "smtp.gmail.com"; //mail server Host
    $mail->Port       =  465;                    // set the SMTP port
    $mail->Username   = "*@gmail.com";  // SMTP  username
    $mail->Password   = "******";  // SMTP password                

    $mail->SetFrom($from, 'Contact Form'); //
    $mail->AddReplyTo($usermail, $sender); // set reply to sender

        $mail->AddAddress('*@gmail.com','***'); //recipient email address

        $mail->Subject = $_POST['inputSubject'];
        $mail->Body = "Name: " . $_POST['inputName'] . "\r\n\r\n Email: ".$_POST['inputEmail']."\r\n\r\nMessage: " . stripslashes($_POST['inputMessage']);
        $mail->WordWrap = 50;


    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;
    } else {

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

}
?>

Answer 1

我强烈建议您不要将 JQuery 与 Angularjs 一起使用。

这是因为您没有正确发送表单参数，请尝试将数据更改为以下内容：

$http({
    method: 'POST',
    url: 'bin/contact_form.php',
    data: $scope.formData, 
    headers: {
       'Content-Type': 'application/x-www-form-urlenconded'
    }}).success ....

希望对你有帮助。

Answer 2

我以这种方式进行 Ajax 调用，将数据发布为 json：

在控制器中：

$http.post('bin/contact_form.php', $scope.formData).success(function(data) {
    console.log(data);
});

在您的 PHP 文件中：

$form = json_decode(file_get_contents("php://input"));

if ( $form->inputName ... )

编辑： $http.post() 只是普通$http 方法的快捷方法，但默认情况下Content-Type 设置为application/json。在 php 中，您将通过上面的代码获取 json 对象。对我来说，键入而不是 $_POST[...] 会更好。