Angularjs取消了帖子并刷新页面而没有任何意义

时间:2016-07-07 11:13:39

标签: javascript angularjs ajax spring

我尝试将文件上传到服务器时,最近出现了一个问题(我不知道发生了什么变化)。 使用所有其他GET和POST网站工作正常,但问题是我需要上传文件(我有一个特定的功能)。

我的网站是使用angularjs和Java Spring作为后端构建的。

这里有一个在工厂中用来上传文件的功能:

var SaveMethod = function(params, callback){
                    var result = $q.defer();
                    var form = new FormData();
                    var xhr = new XMLHttpRequest;
                    // Additional POST variables required by the API script
                    form.append("file", params.files);
                    xhr.upload.onprogress = callback;
                    xhr.open('POST', SessionService.apiUrl + '/video/save');
                    xhr.setRequestHeader("Authorization", 'Bearer ' + SessionService.getToken());
                    xhr.timeout = result.promise;
                    xhr.onload = function(e) {
                      if (xhr.status == 200) {
                        result.resolve(e.target.response);
                      }
                      else {
                        result.reject(xhr.statusText);
                      }
                    };
                    xhr.send(form);
                    return result.promise;
            };

这是控制器:

$scope.upload = function(item) {
        $scope.values.videosubmitted = true;
        $scope.values.object.name = item.name.substr(0, item.name.lastIndexOf('.'));
        $scope.values.uploading = true;
        var params = {
          files: item
        };
        VideoFactory.Save(params, callback).then(function(response){
          response = JSON.parse(response);
          $scope.values.uploading = false;
          if (response.success) {
            $scope.values.object.images = response.data.images;
            $scope.values.object.code = response.data.code;
            $scope.values.object.source = response.data.source;
            $scope.values.object.preview = response.data.preview;
          }
          else
          {
            $scope.values.error =  true;
            $scope.values.errorMessage = response.code;
          }

        }, function(response){
          if (response == null) {
            $scope.values.error = true;
            $scope.values.errorMessage = "ERROR__SERVER_NON_WORKING";
          }
          else
          {
            $scope.values.error = true;
            $scope.values.errorMessage = response.code;    
          }
          $scope.values.uploading = false;
        });
      }

视图(以防万一)

<div class="row" ng-show="!values.videosubmitted">
                        <div class="col-md-10 no-padding-right">
                            <div class="dropzone" id="dropbox" callback-fn="upload(video)" file-dropzone="[video/mp4, video/3gpp,   video/quicktime, video/x-msvideo, video/x-ms-wmv]"
                            file="image" file-name="imageFileName" values-max-file-size="9000000000">
                                <span translate="MODULES.VIDEO.DROPVIDEO"></span>
                            </div>
                        </div>
                        <div class="col-md-2 upload-btn no-padding-left">
                            <label class="upload-search btn btn-primary  no-padding">
                            <div>
                                <input type="file" onchange="angular.element(this).scope().upload(this.files[0])"/>
                                <i class="fa fa-upload"></i>
                                <span translate="COMMON.FILESEARCH"></span>
                            </div>
                            </label>
                        </div>
                </div>

问题是,在将文件发送到服务器之后,如果我从服务器获得成功响应并不重要,则重新加载页面并取消请求。在某些情况下,我从服务器获得成功的响应,但之后重新加载页面,在其他情况下,请求被取消并刷新页面。

我试过了超时但它没有用。

这就是它的样子: enter image description here

1 个答案:

答案 0 :(得分:0)

这个问题与CORS有关,我猜... 问题在于我使用两个域进行Web开发,localhost用于常规使用,以及一个特定域,用于在社交媒体页面中识别以允许登录按钮。 所以我发现当我使用localhsot时一切正常,但是当使用其他域时它不是。

这很奇怪,因为后端对请求做出了正确的回应。