2016-02-22 137 views
0

我试图从提交的表单中显示结果,AngularJS> PHP> Back,但我什么都没有收到。我尝试了很多不同的方法,根据所有的谷歌我做的是正确的,但控制台日志只是说它是未定义的。提交的角度表单提交不显示PHP的结果

这里是提交功能:

$scope.testProcessForm = function() { 
     $http({ 
     method : 'POST', 
     url  : 'test.php', 
     data : $scope.formData, 
     headers : {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'} 
    }) 
     .success(function(data) { 
     if (data.errors) { 
      // Showing errors. 
      $scope.errorselectedServices = data.errors.selectedservices; 
      $scope.errorincEmail = data.errors.incemail; 
     } else { 
      $scope.submissionMessage = data.messageSuccess; 
      $scope.test= data.test; 

的PHP:

$data['test'] = $test; 
echo json_encode($data); 

HTML:

<div ng-show="test">{{test}}</div> 

为什么会出现 “测试是不确定的”,并没有单吗?如果我在PHP中输入回显,我会得到正确的回复。在一些调试之后,它似乎不会在代码中的任何地方挂起。我究竟做错了什么?

// app.js 
 
// create our angular app and inject ngAnimate and ui-router 
 
// ============================================================================= 
 
angular.module('formApp', ['ngAnimate', 'ngMessages', 'ui.router']) 
 

 
// configuring our routes 
 
// ============================================================================= 
 
.config(function ($stateProvider, $urlRouterProvider) { 
 
    
 
    $stateProvider 
 
    
 
     // route to show our basic form (/form) 
 
     .state('form', { 
 
      url: '/form', 
 
      templateUrl: 'form.html', 
 
      controller: 'formController' 
 
     }) 
 
     
 
     // nested states 
 
     // each of these sections will have their own view 
 
     // url will be nested (/form/profile) 
 
     .state('form.tjanst', { 
 
      url: '/tjanst', 
 
      templateUrl: 'form-tjanster.html' 
 
     }) 
 
     
 
     // url will be /form/interests 
 
     .state('form.epost', { 
 
      url: '/epost', 
 
      templateUrl: 'form-epost.html' 
 
     }) 
 
    
 
    
 
     // url will be /form/payment 
 
     .state('form.fax', { 
 
      url: '/fax', 
 
      templateUrl: 'form-fax.html' 
 
     }) 
 
     
 
      // url will be /form/payment 
 
     .state('form.sms', { 
 
      url: '/sms', 
 
      templateUrl: 'form-sms.html' 
 
     }) 
 
    
 
      // url will be /form/payment 
 
     .state('form.mcl', { 
 
      url: '/mcl', 
 
      templateUrl: 'form-mcl.html' 
 
     }) 
 
    
 
      // url will be /form/payment 
 
     .state('form.review', { 
 
      url: '/review', 
 
      templateUrl: 'form-review.html' 
 
     }); 
 
     
 
    // catch all route 
 
    // send users to the form page 
 
    $urlRouterProvider.otherwise('/form/tjanst'); 
 
}) 
 

 
.value('formSteps', [ 
 
    {uiSref: 'form.tjanst', valid: false}, 
 
    {uiSref: 'form.epost', valid: false}, 
 
    {uiSref: 'form.fax', valid: false}, 
 
    {uiSref: 'form.sms', valid: false}, 
 
    {uiSref: 'form.mcl', valid: false}, 
 
    {uiSref: 'form.review', valid: false} 
 
]) 
 

 
.run([ 
 
      '$rootScope', 
 
      '$state', 
 
      'formSteps', 
 
      function($rootScope, $state, formSteps) { 
 
       
 
       // Register listener to watch route changes 
 
       $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { 
 
        
 
        var canGoToStep = false; 
 
        // only go to next if previous is valid 
 
        var toStateIndex = _.findIndex(formSteps, function(formStep) { 
 
         return formStep.uiSref === toState.name; 
 
         
 
        }); 
 
        
 
        console.log('toStateIndex',toStateIndex) 
 
        if(toStateIndex === 0) { 
 
         canGoToStep = true; 
 
        } else { 
 
         canGoToStep = formSteps[toStateIndex - 1].valid; 
 
        } 
 
        console.log('canGoToStep', toState.name, canGoToStep); 
 
        
 
        // Stop state changing if the previous state is invalid 
 
        if(!canGoToStep) { 
 
         // Abort going to step 
 
         event.preventDefault(); 
 
        } 
 
       }); 
 
      
 

 
      } 
 

 

 
     ]) 
 

 
// our controller for the form 
 
// ============================================================================= 
 
.controller('formController', function($scope, $state, $http, formSteps) { 
 
    
 
    // we will store all of our form data in this object 
 
    $scope.formData = {}; 
 
    $scope.submission = false; 
 
    $scope.formStepSubmitted=false; 
 
    $scope.formData.selectedServices = {}; 
 
    $scope.messitServices = [{'name':'Fax', 'id':1}, {'name':'SMS', 'id':2}, {'name':'Minicall', 'id':3}]; 
 
    
 
    $scope.someSelected = function (object) { 
 
     return Object.keys(object).some(function (key) { 
 
     return object[key]; 
 
     }); 
 
    }; 
 
    
 
    var nextState=function(currentState) { 
 
     switch (currentState) { 
 
      case 'form.tjanst': 
 
       return 'form.epost' 
 
       break; 
 
      case 'form.epost': 
 
       return 'form.fax' 
 
       break; 
 
      case 'form.fax': 
 
       return 'form.sms' 
 
       break; 
 
      case 'form.sms': 
 
       return 'form.mcl' 
 
       break; 
 
      case 'form.mcl': 
 
       return 'form.review' 
 
       break; 
 
      default: 
 
       alert('Did not match any switch'); 
 
     } 
 
    }; 
 
    
 
    var updateValidityOfCurrentStep=function(updatedValidity) { 
 
     var currentStateIndex = _.findIndex(formSteps, function(formStep) { 
 
      return formStep.uiSref === $state.current.name; 
 
     }); 
 
     
 
     formSteps[currentStateIndex].valid = updatedValidity; 
 
    }; 
 
    
 
    $scope.goToNextSection=function(isFormValid) { 
 
     console.log('isFormValid ', isFormValid); 
 
     // set to true to show all error messages (if there are any) 
 
     $scope.formStepSubmitted = true; 
 
     if(isFormValid) { 
 
     // reset this for next form 
 
     $scope.formStepSubmitted = false; 
 
     
 
     // mark the step as valid so we can navigate to it via the links 
 
     updateValidityOfCurrentStep(true /*valid */); 
 
     
 
     $state.go(nextState($state.current.name)); 
 
     } else { 
 
     // mark the step as valid so we can navigate to it via the links 
 
     updateValidityOfCurrentStep(false /*not valid */); 
 
     } 
 
    }; 
 
    
 
    $scope.testProcessForm = function() { 
 
      $http({ 
 
      method : 'POST', 
 
      url  : 'kundreg.php', 
 
      data : $scope.formData, 
 
      headers : {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'} 
 
     }) 
 
      .success(function(data) { 
 
      if (data.errors) { 
 
       // Showing errors. 
 
       $scope.errorselectedServices = data.errors.selectedservices; 
 
       $scope.errorincEmail = data.errors.incemail; 
 
      } else { 
 
       $scope.submissionMessage = data.messageSuccess; 
 
       $scope.faxSenderPhoneNo = data.faxSenderPhoneNo; 
 
       $scope.faxSender = data.messit.faxSender; 
 
       console.log(faxSender); 
 
//    $scope.formData = {}; 
 
      } 
 
     }); 
 
    }; 
 
     
 
});
<!DOCTYPE html> 
 
<h3 class="text-center">Granskning</h3> 
 
<h4 class="text-center">Vänligen kontrollera:</h4><br> 
 
<div class="form-group row"></div> 
 
<!-- <span ng-show="errorselectedServices">{{errorselectedServices}}</span> 
 
    <span ng-show="errorincEmail">{{errorincEmail}}</span>></div> --> 
 
    <div ng-show="faxSender">{{ faxSender }} ng show faxsenderphoneno</div> 
 
<br> 
 
<div class="form-group row"> 
 
    <div class="col-xs-6 col-xs-pull"> 
 
    <a ui-sref="form.fax" class="btn btn-block btn-info"> 
 
    Föregående <span class="glyphicon glyphicon-circle-arrow-left"></span></a> 
 
    </div> 
 
    <div class="col-xs-6 col-xs-push"> 
 
    <a ng-click="testProcessForm()"> 
 
    Skapa <span class="glyphicon glyphicon-circle-arrow-right"></span> 
 
    </a> 
 
    </div> 
 
</div> 
 

 

 
<?php 
 
$errors = array(); 
 
$data = array(); 
 
$selectedServices = array(); 
 
// Getting posted data and decodeing json 
 
$_POST = json_decode(file_get_contents('php://input'), true); 
 

 
// checking for blank values. 
 
if (empty($_POST['selectedServices'])) 
 
    $errors['selectedServices'] = 'Minst en tjänst måste väljas.'; 
 

 
if (empty($_POST['incEmail'])) 
 
    $errors['incEmail'] = 'Epost som tillåts använda tjänsterna saknas'; 
 

 
    $selectedServices = $_POST['selectedServices']; 
 

 

 
if (!empty($errors)) { 
 
    $data['errors'] = $errors; 
 
} else { 
 
     if (!empty($_POST["faxSenderPhoneNo"])) { 
 
       // ta bort allt som inte är siffror 
 
       $faxSender = preg_replace('/[^0-9\/+]/', '', $_POST["faxSenderPhoneNo"]); 
 
       // finns ingen nolla så lägger vi till den så vi kan matcha den i regexen 
 
       //regex med internationellt format så databasen blir glad 
 
       if (preg_match('/^0/', $faxSender) === 0) { 
 
        $faxSender = "0{$faxSender}"; 
 
       } 
 
       $faxSenderPhoneNo = preg_replace("/(^0|^46)/", "+46", $faxSender); 
 
       $messit['faxSender'] = $faxSenderPhoneNo; 
 
     } 
 
     else { 
 
      $faxSenderPhoneNo = 'NULL'; 
 
     } 
 
     if (!empty($_POST["deliveryReportFax"])) { 
 
      $deliveryReportFax = $_POST["deliveryReportFax"]; 
 
     } 
 
     else { 
 
      $deliveryReportFax = '3'; 
 
     } 
 
     
 
    } 
 

 
} 
 

 
if (!$error) { 
 
    // sql 
 
echo json_encode($data); 
 
?>

+0

那是你没怎么检索发布的数据。 –

+0

你能发布完整的代码吗? – Kelvin

+2

尝试console.log()方法来检查您的成功函数中的var数据是否返回您认为它返回的内容。 –

回答

0

我发现的错误。显然你必须引用变量到数组中; $ data ['faxSender'] =“$ faxSenderPhoneNo”;

现在按预期工作。编辑: 好吧,它的工作到一个点。我的div仍然没有显示。用console.log(data)记录后,我可以看到我有很多未定义的索引,但是我的数据数组在那里,所以我不明白为什么我无法访问它。

我修正了未定义的东西,然后突然显示每个div。不知道为什么PHP决定将所有信息转储到我的$ data数组中。

第二编辑:显然.success已被弃用。使用.then而不是error_reporting(1);似乎总是给我一个数组,然后可以使用的角度。

0

既然你是JSON编码数据在PHP文件中,文件返回一个字符串。所以,你首先需要将JSON解码为Java脚本对象。另外,你$ http返回角度许诺($ q service)。我不知道如何使用

.success

方法。而是使用

。然后

.then(function successCallback(response) { 
    // this callback will be called asynchronously 
    // when the response is available 
    // decode JSON firs since you are sending JSON from PHP 
    var data = JSON.parse(response); 
    $scope.test = data.test; 
}, function errorCallback(response) { 
    // called asynchronously if an error occurs 
    // or server returns response with an error status. 
    // Handle error here 
});