Question

我做了一个简单的函数来处理用户的更新操作。一个看起来像这样的简单形式

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

使用看起来像这样的角度脚本

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

一切都按照我的预期发挥作用，但我注意到了一种奇怪的行为。为什么在我的最终POST操作执行之前有那么多无法识别的请求？

我注意到我认为我的行动路线是http://www.example.com:8000/ws/profile/update它以某种方式继续使用3个不同的请求http://www.example.com:8000/ws/profile，POST和GET来呼叫DELETE最终达到预期的要求，如下图所示

任何人都知道是什么原因导致这种行为发生，或者我在任何导致此类事件的地方编码错误了？

更新1：以下是Plunkr文件。注意到我无法重新模拟错误，因为该网站目前位于localhost

更新2：我已经缩小了ng-init="getProfile('{{$safeID}}')可能导致此问题的范围。我尝试删除该行并给它一个常量值，并且不会出现错误。这种行为有什么意义？

Answer 1

我发现导致此类行为的问题。这主要是因为jQuery的$.param函数。真正发生的是$ .param操作将遍历您对象的所有属性。使用$ .param作为对象不会自动转换为url编码的字符串（虽然我认为它应该）。

所以我作为这个问题的解决方法是创建一个类似这样的手动序列化函数

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

将表单有效内容传递给序列化函数，然后将其附加到angular的#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);
        });

一切都像魅力一样。

AngularJS http动作执行多个外部事件

1 个答案: