AngularJS http action executes multiple foreign event - angularjs

Question

I made a simple function to handle update actions for user. A simple form that look like this
<div class="com-md-12 col-sm-12 no-pad no-margine" ng-controller="ProfileCtrl" ng-init="getProfile('{{$safeID}}')">
{!! Form::open(array('class' => 'form-horizontal signup-form', 'ng-submit' => 'updateProfile($event)')) !!}
<div class="form-group">
<div class="col-md-6 col-sm-6">
{!! Form::text('first_name', old('first_name'), array('class' => 'form-control', 'placeholder' => 'First Name*', 'ng-model' => 'uProfile.first_name')); !!}
{!! MessagerService::setInlineError($errors->first('first_name')) !!}
</div>
<div class="col-md-6 col-sm-6">
{!! Form::text('last_name', old('last_name'), array('class' => 'form-control', 'placeholder' => 'Last Name*', 'ng-model' => 'uProfile.last_name')); !!}
{!! MessagerService::setInlineError($errors->first('last_name')) !!}
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12">
{!! Form::text('username', old('username'), array('class' => 'form-control', 'placeholder' => 'Screen Name*', 'ng-model' => 'uProfile.username')); !!}
{!! MessagerService::setInlineError($errors->first('username')) !!}
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6">
{!! Form::text('dob', old('dob'), array('class' => 'form-control', 'id' => 'dob', 'placeholder' => 'Date of Birth*', 'ng-model' => 'uProfile.dob')); !!}
{!! MessagerService::setInlineError($errors->first('dob')) !!}
</div>
<div class="col-md-6 col-sm-6">
{!! Form::select('gender', ['' => '------ Gender ------', 'male' => 'Male', 'female' => 'Female'], old('gender'),
array('class' => 'form-control', 'ng-model' => 'uProfile.gender')) !!}
{!! MessagerService::setInlineError($errors->first('gender')) !!}
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12">
<div class="input-group">
<span class="input-group-addon" id="p_url_pretext">example.com/</span>
{!! Form::text('profile_url', old('profile_url'), array('class' => 'form-control', 'placeholder' => 'Profile URL*', 'ng-model' => 'uProfile.profile_url')); !!}
</div>
{!! MessagerService::setInlineError($errors->first('profile_url')) !!}
</div>
</div>
<div class="form-group">
<div class="col-md-12 col-sm-12">
<button type="submit" class="btn btn-default cbtn-login" style="float: right;">Save updates</button>
</div>
</div>
{!! Form::close() !!}
</div>
with angular script that look like this
$scope.updateProfile = function(event){
event.preventDefault();
$http({
method : 'POST',
url : svrid('www') + '/ws/profile/update',
data : $.param($scope.uProfile), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
}).success(function(data) {
console.log(data);
}).error(function(data) {
console.log(data);
});
};
Everything worked as i expected but I have noticed 1 weird behavior. Why are there so many unrecognized requests before my final POST action is being executed?
I noticed that supposed my action route is http://www.example.com:8000/ws/profile/update it somehow keeps on calling http://www.example.com:8000/ws/profile with 3 different requests POST, GET, and DELETE before it finally reaches the intended request as shown in image below
Anyone have any idea what causes such behavior to happen or have I coded something wrong in anywhere that leads to such incident?
Update 1: Here is the Plunkr file. Noted that i could not re-simulate the error because the site is currently at localhost
Update 2: I have narrowed down that the ng-init="getProfile('{{$safeID}}') might have been causing this problem. I tried removing that line and give it a constant value and the errors do not appear. What's with such behavior?

Answer 1

I have found out the problem that causes such behavior. It is mainly because of the jQuery's $.param function. What really happens is the $.param operation will run through all properties of you object. Using $.param as the object will not automatically convert to a url encoded string (though I think it should).
So what I as a workaround to this problem is create a manual serialization function like such
function serializeData( data ) {
// If this is not an object, defer to native stringification.
if ( ! angular.isObject( data ) ) {
return( ( data == null ) ? "" : data.toString() );
}
var buffer = [];
// Serialize each key in the object.
for ( var name in data ) {
if ( ! data.hasOwnProperty( name ) ) {
continue;
}
var value = data[ name ];
buffer.push(
encodeURIComponent( name ) + "=" + encodeURIComponent( ( value == null ) ? "" : value )
);
}
// Serialize the buffer and clean it up for transportation.
var source = buffer.join( "&" ).replace( /%20/g, "+" );
return( source );
}
pass the form payload to the serialization function then append it into angular's #http
$http({
method : 'POST',
url : svrid('www') + '/ws/profile/update',
data : serializeData($scope.uProfile), // pass in data as strings
headers : { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
}).success(function(data) {
$scope.uError = null;
}).error(function(data) {
$scope.uError = data;
console.log(data);
});
and everything works like a charm.