2016-04-18 20 views
6

Ho una forma grezza con alcuni angularjs di convalida,PHP non risponde per Angularjs Richiesta

<form name = "sform" novalidate="true"> 
<table border="0"> 
    <tr> 
     <td> 
      First name: 
     </td> 
     <td> 
      <input type="text" name="fname" ng-model="fname" placeholder="First Name" required="true" ng-pattern="/^[A-Za-z]*$/"> 
     </td> 
     <td ng-show="sform.fname.$invalid && !sform.fname.$pristine" class="help-block">wrong name </td> 
    </tr> 

    <tr> 
     <td> 
      Last Name: 
     </td> 
     <td> 
      <input type="text" ng-model="lname" placeholder="last Name" required="true" ng-pattern="/^[A-Za-z]*$/"> 
     </td> 
     <td ng-show= "sform.lname.$invalid && !sform.lname.$pristine" class="help-block">wrong Last name </td> 
    </tr> 
    <tr> 
     <td> 
      Email: 
     </td> 
     <td> 
      <input type="email" ng-model="email" placeholder="email" required="true"> 
     </td> 
     <td ng-show="sform.email.$invalid && !sform.email.$pristine" class="help-block">wrong Email </td> 
    </tr> 
    <tr> 
     <td> 
      <button type="submit" ng-disabled="sform.$invalid" ng-click = "submitForm()">Submit</button> 
     </td> 
    </tr>  
</table> 
</form> 

e file .js correlati sono

far_app.js

var farLogin = angular.module('far_login',[]); 

far_formcontroler .js

farLogin.controller('far_formcontrol',['$scope','$http',function($scope,$http) { 
    $scope.url='http://localhost/far_submit.php'; 
    var config = { 
       headers : { 
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' 
       } 
      } 

     // function to submit the form after all validation has occurred    
     $scope.submitForm = function() { 
      alert('our form is amazing'+$scope.fname+' '+$scope.email+' '+$scope.lname); 
      // check to make sure the form is completely valid 
      if ($scope.sform.$valid) { 
       $http.post($scope.url,{"name": $scope.fname, "email": $scope.email, "lname": $scope.lname},config). 
       success(function() { 
          alert('our form is amazing'+$scope.fname+' '+$scope.email+' '+$scope.lname); 
         }) 

      } 
      else 
      { 
       alert('our form is not amazing'); 
      } 

     } 

    }]); 

E il mio php file di è

<?php 
header("Access-Control-Allow-Origin: *"); 
?> 
<script type="text/javascript"> alert("this is php")</script> 
<?php 
?> 

ma lo script php non è affatto l'esecuzione e la loro non sono errore nella console del browser.

Dove sto andando male?

Grazie.

+0

Hai impostato il controller da qualche parte nel tuo html? –

+0

ya ho fatto il suo tag div interno che copre tutto il modulo –

+0

Riesci a vedere la richiesta http per lo script PHP all'interno del debugger del browser? Non lo so angolare, ma forse non accetta contenuti html. Prova javascript raw senza tag script html. – alvaropgl

risposta

6

ci sono paio di buoni discussioni su angolare $ questioni http postali di SO stesso, ad esempio di dare un'occhiata a questo thread: How do I POST urlencoded form data with $http in AngularJS? o questa: How can I post data as form data instead of a request payload?

Nota: È necessario eseguire questo utilizzando un web server localmente. codice qui sotto sta lavorando per me "un OK", ho seguito:

  • scaricato il codice che avete fornito
  • Salva tutti in una directory locale
  • php Iniziato server Web integrato , accessibile l'index.html a: http://localhost:8181/ presentato la forma e mi ha restituito una risposta jSON: {"status":"OK","data":{"userid":null}}

Pastebin: far_app.js, index.html, far_login.php

Ho usato il server integrato PHP solo per scopi di test, ma, consiglio vivamente di utilizzare qualcosa come Wampp o Xampp su Windows per eseguire questo. Puoi configurare manualmente anche Apache/PHP/Mysql, ma Wampp/Xampp è piuttosto facile da installare e da usare.

Ho ristrutturato il codice un po ', qualcosa come segue:

angular.module('far_login',[]) 
.controller('far_formcontrol',['$scope','$http', function($scope, $http) { 
    // function to submit the form after all validation has occurred    
    $scope.submitForm = function() { 
     console.log('First Name : ' , $scope.fname); 
     console.log('Email : ' , $scope.email); 
     console.log('Last Name: ', $scope.lname); 
     // check to make sure the form is completely valid 
     if ($scope.sform.$valid) { 
      $http({ 
       url: 'http://localhost:8181/far_submit.php', 
       method: 'POST', 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'}, 
       transformRequest: function(obj) { 
        var str = []; 
        for(var p in obj) 
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); 
        return str.join("&"); 
       }, 
       data: {"name": $scope.fname, "email": $scope.email, "lname": $scope.lname} 
      }) 
      .then(function(response) { 
       console.log(response) 
      }) 
      .catch(function (error) { 
       console.log(error); 
      }); 

     } else { 
      alert('our form is not amazing'); 
     } 
    }; 
}]); 

questo si basa su Plunker da Angular doc, e il file far_submit.php come:

<?php 
header("Access-Control-Allow-Origin: *"); 
header('Content-Type: application/json'); 

$data = [ 'status' => 'OK', 'data' => [ 'userid' => $autogeneratedUserId] ]; 
echo json_encode($data); 

Marchio sicuro il far_submit.php è accessibile a http://localhost/far_submit.php