javascript - 尝试发布大型 JSON 数据时出现错误请求错误

Question

首先，我是一名新开发人员，因此如果我遗漏了一些明显的内容，我提前表示歉意。

我正在开发一个 Web 应用程序，用于离线处理 IndexedDB 中的大量数据。当用户访问Web应用程序时，客户端从服务器获取整个数据库并将其存储在indexeddb中以供使用。这工作正常，但是当我尝试使用 post 方法将数据(再次是多条记录)发送回 WCF 时，在尝试发送 ajax body 参数时以及当我确实使用时，我收到方法不允许或错误请求uri参数，它到达服务器，但并不是所有数据都被发送。我认为无效字符可能是一个因素，因此我使用 javascript 中的encodeURIComponent 方法将无效字符转换为 uri 参数中的有效字符。我还尝试使用名为 LZString 的 JavaScript 压缩 api 来压缩数据。我尝试过使用 XMLHttpRequest (我不完全理解)。这个网络应用程序必须离线工作，所以除了在客户端首次打开时最初获取数据并将数据同步回服务器之外，我无法进行服务器调用，这就是为什么我必须一次发送大量数据的原因。

我还使用了名为 Dexie.js 的 IndexedDB 包装器。

我的代码示例如下。有些代码被注释了，但留下来显示我已经尝试过的内容。

这是我在服务器上的内容..

    [OperationContract]
    [WebInvoke(Method = "POST",
        RequestFormat = WebMessageFormat.Json,
        ResponseFormat = WebMessageFormat.Json,
        UriTemplate = "REST_SendCompletedServiceOrders",
        BodyStyle = WebMessageBodyStyle.Wrapped)]
    [FaultContract(typeof (Exception))]
    bool REST_SendCompletedServiceOrders(string compressedWebData);

这是客户端上用于同步回来的点击事件。

$('#syncCompletedData').on('click', function() {

    db.ServiceOrder

        .toArray(function(so) {
            var completedServiceOrders = [];
            for (var i = 0; i < so.length; i++) {
                if (so[i].IsCompleted) {
                    completedServiceOrders.push(so[i]);
                };
            }
            var customerId = sessionStorage.getItem("customerId");
            var companyId = sessionStorage.getItem("companyId");
            var computerId = sessionStorage.getItem("computerId");
            var webData = JSON.stringify({ webCustomerId: customerId, webCompanyId: companyId, webComputerId: computerId, webServiceOrder: completedServiceOrders });
            alert(webData);

            alert("before compression is " + webData.length);

            var URIEncodedWebData = encodeURIComponent(webData);
            var JSONWebData = JSON.stringify(URIEncodedWebData);

        var compressedWebData = LZString.compressToUTF16(JSONWebData);

            alert("after compression is " + compressedWebData.length);
            debugger;

            try {
                $.ajax({
                    type: "POST",
                    url: "MFSRemoteDataService/REST_SendCompletedServiceOrders",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: { compressedWebData: compressedWebData },
                    success: function(data) { alert(JSON.stringify(data)); },
                    failure: function(errMsg) {
                        alert(errMsg);
                    }
                });
            } catch (e) {
                alert(e);
            }

        });
});

压缩前数据长度为7707。 压缩后数据长度为1831。

预先感谢您的任何帮助、反馈、批评等。

Answer 1

在显示的代码片段中，您正在编写在 get 中使用的 ajax 数据，这通常意味着您准备一个 uri。但是，由于他同时使用 post 和 ajax，因此信息将在 post 请求正文中发送，因此不需要编码。

编码使字符串化的 json 膨胀。您可以在 webdata 处停止并自行发布，删除 ajax 选项中的 dataType 参数，切换到在 ajax 选项中使用 traditional:true，并且它应该全部正确模型绑定(bind)。

很难说出您的服务器端 View 模型是什么样子，但是如果接受参数名为 compressedWebData (名称必须准确，结构也相同)，那么它可能会像这样工作这个

//code as shown in OP
//replace var webData = with the following
var compressedWebData = { webCustomerId: customerId, webCompanyId: companyId, webComputerId: computerId, webServiceOrder: completedServiceOrders };

try {
     $.ajax({
         type: "POST",
         url: "MFSRemoteDataService/REST_SendCompletedServiceOrders",
         contentType: "application/json",
         data: JSON.stringify(compressedWebData),
         traditional:true,
         success: function(data) { alert(JSON.stringify(data)); },
         failure: function(errMsg) {
             alert(errMsg);
         }
    });
} catch (e) {
   alert(e);
}