簡體   English   中英

什么也沒有發生提交帖子phpmailer + AngularJS

[英]Nothing happen Submit Post phpmailer + AngularJS

我有一個簡單的3頁html。 索引,聯系方式和服務。 我用ng-view稱模板視圖為html。 一切都很好。 我看到它們帶有按鈕導航欄。

在contact.html中,我要使用“ http://www.chaosm.net/blog/2014/05/21/angularjs-contact-form-with-bootstrap-and-phpmailer/ ”中的phpmailer和教程。

在我的控制器中,我將代碼JS粘貼到新的控制器中,並且在html文件中粘貼了同樣形式的fron教程。 經過差異測試后,我到達了控制器正常工作的位置,但是當我對輸入進行脈沖操作時,什么也沒發生,也不發送任何東西。

我在代碼控制器中更改了相對於exampledomain.net/js/contact-form.php的路徑。 更改聯系方式,以便調用PHPMailerAutoload.php的路徑。

在contactform.html中,我在第一個div中調用了controller)和相同的表單示例。

在contact-form.php中,所有內容都與本教程相同,只是我更改了路徑,就像之前寫的一樣。

我使用ng-view可能導致郵寄表格無效嗎? 有人有一個想法,為什么contact-form.php似乎沒有運行?

我是Angular JS的初學者。 謝謝

我擁有的唯一控制器的代碼(用於路由和表單phpmailer):

//Creo modulo y su nbre + establecer function routage
var AppSol = angular.module('AppSol', ['ngRoute']);

//Configure routage

    AppSol.config(function($routeProvider){

        $routeProvider

        //Indico links pages nav

        .when ('/',{
            templateUrl:'templates/home.html',
            controller:''

        })

        .otherwise ({
                    redirectTo:"/"
        })

        .when ('/Inicio',{
            templateUrl:'templates/home.html',
            controller:'MainCtrl'

        })  

        .when ('/Contacto',{
            templateUrl:'templates/contacto.html',
            controller:'ContactController'

        })  

        .when ('/Servicios',{
            templateUrl:'templates/servicios.html',
            controller:'ServCtrl'

        }); 

    });

        //Creo controller and lo injecto
        AppSol.controller ('MainCtrl', function($scope){

        //Probar que funciona con mensaje
        $scope.titulo="MY TITLE";


        });


        //Creo controller and lo injecto
        AppSol.controller ('ServCtrl', function($scope){

        //Probar que funciona con mensaje
        $scope.message='';
        $scope.titulo='SECOND TITLE'       

        });





        //Creo controller and lo injecto

        AppSol.controller ('ContactController', function ($scope, $http) {
        $scope.titulo='TEST1 CALL CONTACT CONTROLLER'   
        //$scope.result = 'Hidden'
        $scope.resultMessage='Test2 with Result control - I see this mensaje.';
        $scope.formData; //formData is an object holding the name, email, subject, and message
        $scope.submitButtonDisabled = false;
        $scope.submitted = false; //used so that form errors are shown only after the form has been submitted
        $scope.submit = function(contactform) {
            $scope.submitted = true;
            $scope.submitButtonDisabled = true;
            if (contactform.$valid) {
                $http({
                    method  : 'POST',
                    url     : 'http://exampledomain.net/test/js/contact-form.php',
                    data    : $.param($scope.formData),  //param method from jQuery
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  //set the headers so angular passing info as form data (not request payload)
                }).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 = 'Failed :( Please fill out all the fields.';
                $scope.result='bg-danger';
            }
        }
    });








            Of course:


            <div class="jumbotron" ng-app="AppSol">
            <div class="container">
            <div id="corte"></div>



            <div class="vertical-middle">
            <div class="container">
            <div class="panel panel-default">
            <div class="panel-heading">
            <h2 class="panel-title">Contact Form</h2>              <strong>{{titulo}} for test controller form</strong>
            </div>
            <div ng-controller="ContactController" class="panel-body">
            <form ng-submit="submit(contactform)" name="contactform" method="post" action="" class="form-horizontal" role="form">
            <div class="form-group" ng-class="{ 'has-error': contactform.inputName.$invalid && submitted }">
            <label for="inputName" class="col-lg-2 control-label">Name</label>
            <div class="col-lg-10">
            <input ng-model="formData.inputName" type="text" class="form-control" id="inputName" name="inputName" placeholder="Your Name" required>
            </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': contactform.inputEmail.$invalid && submitted }">
            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
            <div class="col-lg-10">
            <input ng-model="formData.inputEmail" type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Your Email" required>
            </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': contactform.inputSubject.$invalid && submitted }">
            <label for="inputSubject" class="col-lg-2 control-label">Subject</label>
            <div class="col-lg-10">
            <input ng-model="formData.inputSubject" type="text" class="form-control" id="inputSubject" name="inputSubject" placeholder="Subject Message" required>
            </div>
            </div>
            <div class="form-group" ng-class="{ 'has-error': contactform.inputMessage.$invalid && submitted }">
            <label for="inputMessage" class="col-lg-2 control-label">Message</label>
            <div class="col-lg-10">
            <textarea ng-model="formData.inputMessage" class="form-control" rows="4" id="inputMessage" name="inputMessage" placeholder="Your message..." required></textarea>
            </div>
            </div>
            <div class="form-group">
            <div class="col-lg-offset-2 col-lg-10">
            <button type="submit" class="btn btn-default" ng-disabled="submitButtonDisabled">
                Send Message
            </button>
            </div>
            </div>
            </form>
            <p ng-class="result" style="padding: 15px; margin: 0;">{{ resultMessage }}</p>
            </div>
            </div>
            </div>
            </div>

視圖是可以的,因此您可以在$ http promise中添加錯誤,並查看服務器響應是什么。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM