AngularJS 的 $http 没有像 jQuery 的 $ajax 一样将表单数据传递到 POST 请求中

Question

我在将 jQuery 的 $.ajax 请求转换为 Angularjs 的 $http 请求时遇到问题 (Angularjs v1.8.x ).

我有一个 表单，其中包含一个文本输入和一个 image/file 输入 我正在通过表单的提交按钮发送请求 ng-click="uploadImage($e)".

我认为问题在于 Angularjs 没有将填写的表单数据与请求一起发送。我的 $.ajax 请求工作正常，但对于我的 $http 请求，浏览器的开发者控制台中没有 Form Data - 请参见下面的屏幕截图。对我的 $http 请求的响应是 200，但返回的数据不正确，因为表单数据从未随请求一起发送。

对于 $.ajax 和 $http 我准备 表单数据 使用此功能：

    /**
     * @var form is an HTML element
     */
    function prepData(form) {
        var fdata = new FormData();
        for(var i = 0; i < form.length; i++) {
            var NN = form[i].nodeName.toUpperCase();

            var name = form[i].name;

            if(typeof name != "undefined" && name != "") {
                if(NN == "INPUT") {
                    var NT =  form[i].type.toUpperCase();
                    if(NT == "FILE") {
                        for(var j = 0; j < form[i].files.length; j++) {
                            fdata.append(name, form[i].files[j], form[i].files[j].name);
                        }
                    } else if(NT == "CHECKBOX" || NT == "RADIO") {
                        if(form[i].checked == true) {
                            fdata.append(name, form[i].value);
                        }
                    } else {
                        fdata.append(name, form[i].value);
                    }
                } else {
                    fdata.append(name, form[i].value);
                }
            }
        }
        return fdata;
    }

$.ajax 请求选项：

var ajaxOptions = {
    type : "POST",
    async : true,
    url : getFullUrl(),
    data : prepData(form),
    dataType : self.dataType,
    beforeSend: function (request) {
        request.setRequestHeader("translate", User.settings.lang);
        request.setRequestHeader("userid", User.logged);
    }
};

$http 请求选项：

var httpOptions = {
    type : "POST",
    async : true,
    url : getFullUrl(),
    data : prepData(form),
    dataType : self.dataType,
    headers : {
        "translate": User.settings.lang,
        "userid": User.logged,
        "X-Requested-With": "XMLHttpRequest",
        "Content-Type": undefined,
        "transformRequest": []
    },
    eventHandlers: { 
        "readystatechange": function(event) {
            this.xhr = event.currentTarget;
        }
    }
};

当我在浏览器的开发者工具中比较 $.ajax 和 $http 时，我可以看到它们的 response-headers 是相同的，但是 request-headers 在这些属性上不同（见屏幕截图下）：

Accept
Content-Type

屏幕截图 1 - $.ajax() (jQuery)：

屏幕截图 2 - $http()（AngularJS v1.8.x）：

Answer 1

相当于 $.ajax 的 type: ... 是 $http 的 method: ....

一般来说，$http 请求应该是这样的：

var httpOptions = {
    method : "POST",
    // ...
};

$http(httpOptions).then(function(res) { 
    // ... 
}, function(res) {
    // ...
});

AngularJS 的 $http 没有像 jQuery 的 $ajax 一样将表单数据传递到 POST 请求中

AngularJS's $htttp not passing form data into the POST request like jQuery's $ajax

javascript

ajax

jquery

angularjs