Question

我正在尝试显示已提交表单的结果，AngularJS＆gt; PHP＆gt;回来但我一无所获。我已经尝试了很多不同的方法，根据谷歌的所有方法，我做得对，但控制台日志只是说它是未定义的。

这是提交功能：

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

为什么我得到“测试未定义”且没有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);
?>

Answer 1

我发现了错误。显然你必须将变量引用到数组中; $ data [＆＃39; faxSender＆＃39;] =＆＃34; $ faxSenderPhoneNo＆＃34;;

现在按预期工作。

编辑：嗯它的工作到了一定程度。我的div仍然没有显示。使用console.log（数据）进行日志记录后，我可以看到我有很多未定义的索引，但是我的数据数组已经存在，所以我不明白为什么我无法访问它。

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

第二次编辑：显然。不成功.success。使用.then而不是error_reporting（1）;似乎总是给我一个数组，其数据有角度，然后可以使用。

Answer 2

由于您是php文件中的JSON编码数据，因此返回String的文件。因此，您需要首先将JSON解码为Java脚本对象。此外，你$ http返回角度承诺（$ q服务）。我不确定使用

.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
});

Angular表单提交不显示PHP的结果

2 个答案: