私は角度でメールを送信しようとしています。私はこれに正しい方法で接近していますか？

Question

私はただ新しいことを学ぼうとしています。私は角度とPHPを使用して電子メールを送信できるようにしたい。フォームデータをオブジェクトに変換しています。次に、このオブジェクトを変数として送信し、そのデータをPHPファイルに送信したいとします。私は変数を作成することができますが、私はデータがPHPファイルに設定されているとは思わない。私はここで何が欠けていますか？

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

 
var url = '/contact-form-handler.php'; 
 
vm.codeStatus = ""; 
 
vm.form = {}; 
 

 
vm.submit = function($event) { 
 

 
    $event.preventDefault(); 
 

 
    console.log(this.form); 
 
    $http({ 
 
    method: "POST", 
 
    url: url, 
 
    data: vm.form, 
 
    headers: { 
 
     'Content-Type': 'application/x-www-form-urlencoded' 
 
    } 
 
    }). 
 
    success(function(result) { 
 
    console.log(result); 
 
    console.log('hit'); 
 
    }). 
 
    error(function(result) { 
 
    console.log('error'); 
 
    }); 
 
    return false; 
 

 
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<?php 
 

 
header('Access-Control-Allow-Origin: *'); 
 

 

 
if (isset($_POST["data"])) { 
 

 
\t $from = 'Portfolio'; 
 
\t $to = 'rafael.heard@gmail.com'; 
 
    $subject = 'Portfolio Inquiry'; 
 
\t $body = $_POST['data']; 
 

 

 
\t mail($to, $subject, $body, $from); 
 

 
    $result = 'mail sent'; 
 
\t 
 
}else{ 
 
\t $result = 'not set'; 
 
} 
 
?> 
 

 
<div ng-app="app" ng-controller="MainController as main"> 
 
    <form role="form" name="contactForm" ng-submit="main.submit($event)" required novalidate> 
 
    <div class="form-groups"> 
 
     <div class="group"> 
 
     <input type="text" name="username" ng-model="main.form.name" placeholder="Name (required)" required /> 
 
     </div> 
 

 
     <div class="group"> 
 
     <input type="email" name="userEmail" ng-model="main.form.email" placeholder="Email (required)" required /> 
 
     </div> 
 

 
     <div class="group"> 
 
     <textarea type="text" name="message" ng-model="main.form.message" ng-minlength="10" rows="10" required></textarea> 
 
     </div> 
 

 
     <button>Send</button> 
 
    </div> 
 
    </form>

Answer 1

私はこの1つを考え出しました。私は自分のPHPファイルと角httpで私のアプローチを変更します。私はオブジェクトをシリアライズしました。

var url = 'contact-form-handler.php'; 
 
    vm.codeStatus = ""; 
 
    vm.form = {}; 
 

 
    vm.submit = function($event) { 
 

 
     // $event.preventDefault(); 
 
     console.log($.param(vm.form)); 
 

 
     $http({ 
 
      method: "POST", 
 
      url: url, 
 
      data: $.param(vm.form), 
 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
 
     }). 
 
     success(function(result) { 
 
      console.log(result); 
 

 
     }). 
 
     error(function(data) { 
 
      console.log('not sent'); 
 
     }); 
 
     return false; 
 

 
    }; 
 

 

 

 
}]);

<?php 
 

 
header('Access-Control-Allow-Origin: *'); 
 

 
if (isset($_POST["subject"])) { 
 

 

 
    $name = $_POST['name']; 
 
    $subject = $_POST['subject']; 
 
    $from = $_POST['email']; 
 
    $message = $_POST['message']; 
 
\t $to = 'rafael.heard@gmail.com'; 
 

 

 
\t mail($to, $subject, $message, $from); 
 
    
 

 
}else{ 
 
\t echo 'not set'; 
 
} 
 
?>