Angular JS HTTP Post Double Return

Paul Konstanski
Paul Konstanski used Ask the Experts™
on
I'm getting two different post responses when we slightly change some code.

OPTION ONE: It sends back two messages.

When we use this code in our controller to send the post data, we get back two messages.

            $http({
                method: 'POST',
                url: 'https://crucore.com/api.php?a=contact',
//                headers: {
//                    'Content-Type': 'application/x-www-form-urlencoded'
//                },
//                data: $.param($scope.formData) //param method from jQuery
                data: $scope.formData

            }).success(function (data) {

                console.log(data);
                if (data.success) { //success comes from the return json object
                    $scope.submitButtonDisabled = true;
                    $scope.resultMessage = "Thanks! We have received your message.";
                    $scope.result = 'bg-success';
                } else {
                    $scope.submitButtonDisabled = false;
                    $scope.resultMessage = "Sorry, there's an error in processing your request. Please try again.";
                    $scope.result = 'bg-danger';
                }
            });

Open in new window

api.php?a=contact      200      xhr      angular.js:11362      612 B      345 ms      
api.php?a=contact      200      xhr      Other      612 B      184 ms
     

OPTION TWO: It sends back one message.
But when I change the code to this, it only sends one message back.  The only things that changed are in the section where the lines are commented out.

            $http({
                method: 'POST',
                url: 'https://crucore.com/api.php?a=contact',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                data: $.param($scope.formData) //param method from jQuery
//                data: $scope.formData

            }).success(function (data) {

                console.log(data);
                if (data.success) { //success comes from the return json object
                    $scope.submitButtonDisabled = true;
                    $scope.resultMessage = "Thanks! We have received your message.";
                    $scope.result = 'bg-success';
                } else {
                    $scope.submitButtonDisabled = false;
                    $scope.resultMessage = "Sorry, there's an error in processing your request. Please try again.";
                    $scope.result = 'bg-danger';
                }
            });

Open in new window


But when I do it this way, it only returns one.

api.php?a=contact      200      xhr      angular.js:11362      612 B      345 ms      

Any idea why the first one returns the code of "other"?  My understanding is the first option is the "official" way to do it when using AngularJS.

Thank you.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
could you provide a link to a test page ?
$.param serialize your form data, I'm not sure it's a best/good/right/prefered/recommended way for huge form or data to send
I think in first case we've have some browser action
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I created a mockup of our code using the snippets above.  There is a link to a sample page demonstrating the results.
The sample code runs either one or the other method depending on a checkbox - looking at the results in the console - I only get one response back. The problem is therefore somewhere else in your code. We would need to see the above snippets in context to take this further.

HTML
    <div ng-controller="testCtrl">
      <input type="checkbox" ng-model="method" value="1" />
      <form ng-submit="submit()">
        <input type="text" name="firstname" ng-model="formData.firstname" />
        <input type="text" name="surname" ng-model="formData.surname" />
        <button ng-show="!submitButtonDisabled">Submit</button>
      </form>
      <div>{{resultMessage}}</div>
    </div>

Open in new window

Angular
<script>
(function() {
  'use strict';
  angular.module('app',[])
    .controller('testCtrl', testCtrl);
  function testCtrl($scope, $http) {
    $scope.formData = {};
    
    $scope.submit = function () {
      if ($scope.method == 1) {
        $http({
          method: 'POST',
          url: 't1373.php',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: $.param($scope.formData) //param method from jQuery
  //                data: $scope.formData

        }).success(function (data) {

          console.log(data);
          if (data.success) { //success comes from the return json object
            $scope.submitButtonDisabled = true;
            $scope.resultMessage = "METHOD 2: Thanks! We have received your message.";
            $scope.result = 'bg-success';
          } else {
            $scope.submitButtonDisabled = false;
            $scope.resultMessage = "Sorry, there's an error in processing your request. Please try again.";
            $scope.result = 'bg-danger';
          }
        });
      }
      else {
        $http({
          method: 'POST',
          url: 't1373.php',
  //                headers: {
  //                    'Content-Type': 'application/x-www-form-urlencoded'
  //                },
  //                data: $.param($scope.formData) //param method from jQuery
          data: $scope.formData

        }).success(function (data) {

          console.log(data);
          if (data.success) { //success comes from the return json object
            $scope.submitButtonDisabled = true;
            $scope.resultMessage = "METHOD 2: Thanks! We have received your message.";
            $scope.result = 'bg-success';
          } else {
            $scope.submitButtonDisabled = false;
            $scope.resultMessage = "Sorry, there's an error in processing your request. Please try again.";
            $scope.result = 'bg-danger';
          }
        });
      }
    }
  }
})();
</script>

Open in new window


Working sample here
Commented:
My 2 cents worth:

method 1 is the correct Angular way to send HTTP POST requests. Method 2 mixes in JQuery which should be avoided.

I concurr with Julian, there must be something else which causes a second call from the digest cycle.
Could you please post all the code together with the view.
Project Specialist
Commented:
Here's what my co-worker has said and I've kind of gone with it.

In the Chrome console, under the network tab, you can see if request method for each request.  If you see one OPTIONS and one POST, then that is normal.  If they are both POSTs, then something in the JS in double triggering it.
Paul KonstanskiProject Specialist

Author

Commented:
Because he stated that it was normal for it to do two requests. The first one called (other) is just checking to make sure the connection is reachable. the second then actually sends the post.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial