How to capture and display errors using Angular and AJAX

Asked

Viewed 52 times

0

I’m trying to receive the return via Ajax and display using Angular JS, but without success, follows below the code:

HTML:

<body ng-app="app" ng-controller="controlador">
    <form ng-submit="submitForm()">
        <label>X: </label><input type="number" ng-model="x"/>
        <label>Y: </label><input type="number" ng-model="y"/>
        <span ng-show="erroCalcular">{{erroCalcular}}</span>
        <span ng-show="sucesso">{{sucesso}}</span>
        <input type="submit" value="Enviar"/>
    </form>
</body>

Javascript:

app = angular.module("app",[]);
app.controller("controlador", ["$scope", "$http",
function($scope, $http){
        $scope.submitForm = function() {
            $http({
            method  : 'POST',
            url     : 'enviar.php',
            data :{ valor_x: $scope.x, valor_y: $scope.y},
            headers : {'Content-Type': 'application/x-www-form-urlencoded'}
        })
        .success(function(data) {
            if (data.errors) {
                $scope.erroCalcular = data.errors.calculo;
            } else {
                $scope.sucesso = data.sucesso;
            }
        })
    };
}]);

send php.

<?php
    require_once "calcular.php";
    //require_once "desenhar.php";
?>

calculate.php

<?php
    $errors = array();
    $data = array();
    $dados = json_decode(file_get_contents('php://input'), true);
    $x = $dados['valor_x']['x'];
    $y = $dados['valor_y']['y'];

    if ($y == 0)
      $errors['calculo'] = 'Erro ao calcular.';
    else
      $errors['calculo'] = '';

    if (!empty($errors)) {
      $data['errors']  = $errors;
    }
    else {
      $data['sucesso'] = 'O calculo foi realizado com sucesso.';
    }
?>
php angularjs ajax

  • And what’s happening, what message is being displayed ?

  • No message displays, that’s the problem.

1 answer

0

Solution:

1st Capture of values:

$x = $dados['valor_x'];
$y = $dados['valor_y'];

2nd Inclusion of the following line at the end of the file calcular.php:

echo json_encode($data);

3º calcular.php

<?php
    $errors = array();  
    $data = array();
    $dados = json_decode(file_get_contents('php://input'), true);

    $x = $dados['valor_x'];
    $y = $dados['valor_y'];

    if ($y == 0){
      $errors['calculo'] = 'Impossível dividir por 0.';
    }
    else{
      $errors['calculo']    = '';
    }

    if($errors['calculo'] != '') {
      $data['errors']  = $errors;
    }
    else {
      $data['sucesso'] = $y/$x;
    }
    echo json_encode($data);
?>

4º . Success

.success(function(data) {
            if (data.errors) {
                $scope.erroCalcular = data.errors.calculo;
                $scope.sucessoCalculo = '';             
            }else{
                $scope.sucesso = data.sucesso;
                $scope.erroCalcular = '';
            }
})

Reference: http://php.net/manual/en/function.json-encode.php

Browser other questions tagged php angularjs ajax

You are not signed in. Login or sign up in order to post.