使用表单数据将数组发布到使用 AJAX 的 C# WebAPI

Posted 2023-04-13

【中文标题】使用表单数据将数组发布到使用 AJAX 的 C# WebAPI

【英文标题】：Post array using Form Data to C# WebAPI using AJAX

【发布时间】：2020-05-06 11:46:24

【问题描述】：

我想使用 FormData 将包含一些文件的数组发布到 WebAPI，但是它在 Webapi 上显示 [Object%Object]。请帮我解决这个问题。预知。下面是代码sn-p：

        var arr = [];
        var table = $('#tblOptionType');
        var tr = table.find('tbody tr');
        tr.each(function (i, v) 
            if (i != 0) 
                var values = 
                    Options: $(v)[0].cells[0].firstElementChild.value,
                    IsCorrect: $(v)[0].cells[1].firstElementChild.checked,
                ;
                arr.push(values);
            
        );
        formData = new FormData();
        jQuery.each(jQuery('#QuestionImage')[0].files, function (i, file) 
                 formData.append('file-' + i, file);
        );                 
        formData.append("Options", arr);
        $.ajax(
            url: 'http://localhost:56892/api/Admin/Questions/AddQuestion',
            method: "POST",
            data: formData,
            contentType: false,
            processData: false,
            traditional: true,
            success: function (res) 
            error:function(err)
        );

这是我在 WebAPI 上收到的字符串：

【参考方案1】：

您需要设置contentType，这是您要发送的数据类型，因此application/json; charset=utf-8 是常见的，application/x-www-form-urlencoded; charset=UTF-8 也是默认设置：

$.ajax(
        url: 'http://localhost:56892/api/Admin/Questions/AddQuestion',
        method: "POST",
        data: JSON.stringify(formData),
        contentType: "application/json; charset=utf-8",
        processData: false,
        traditional: true,
        success: function (res) 
        error:function(err)
    );

【讨论】：

感谢您的快速响应，但是通过此代码，方法类型已更改为“OPTIONS”，因为这是跨域请求。请告诉我如何处理。

我无法理解，但似乎与这个问题无关。看看ajax-request-with-custom-header-sent-to-web-api-server-with-cors-enabled它可能会有所帮助