Javascript jqgrid 服务器端错误消息/验证处理

jqgrid server side error message/validation handling

提问by user620339

In my json responses, I have 'STATUS' and 'errors' properties. How can use this errors properties with jqGRid. To parse all errors and show them in a dialog box.

在我的 json 响应中，我有“状态”和“错误”属性。如何在 jqGRid 中使用此错误属性。解析所有错误并在对话框中显示它们。

Basically just check, if status:'ERROR' then display all errors.

基本上只是检查，如果 status:'ERROR' 然后显示所有错误。

Thanks!

谢谢！

回答by Oleg

In the last part of the answerto your previous question I tried already tried to give the answer on your current question. Probably I expressed me not clear enough.

在对您上一个问题的回答的最后一部分中，我已经尝试过就您当前的问题给出答案。可能我表达的不够清楚。

You should not place and information about the error inside of the standard successful response. You should just follow main rules of the HTTP protocol used for communication between the server and the client.

您不应在标准成功响应中放置有关错误的信息。您应该只遵循用于服务器和客户端之间通信的 HTTP 协议的主要规则。

The loading data in the grid, editing of the rows and all Ajax communication with the server are implemented with respect of HTTP protocol. Every HTTP response has the status codein the first line of the response. It's very important to understand the meaning of this.

网格中的加载数据、行的编辑以及与服务器的所有 Ajax 通信都是根据 HTTP 协议实现的。每个 HTTP 响应都在响应的第一行中包含状态代码。理解这句话的含义非常重要。

The typical successful request with JSON data looks as following

使用 JSON 数据的典型成功请求如下所示

HTTP/1.1 200 OK
...
Content-Type: application/json
...

{"page":"1",....}

If the URL which try to load not exist for example the first line of the server response will be

如果尝试加载的 URL 不存在，例如服务器响应的第一行将是

HTTP/1.1 404 Not Found

and jqGrid based on the HTTP status code(404 in the case) *will not try to interpret the the server response as the data which contains data with the grid content.

和基于 HTTP 状态代码（在这种情况下为 404）的jqGrid *不会尝试将服务器响应解释为包含网格内容数据的数据。

The demohas the following code

该演示有以下代码

$("#list").jqGrid({
    url: 'Unknown.json', // there are no file with the name
    datatype: 'json',
    // ... some other typical parameters
    loadComplete: function () {
        alert("OK");
    },
    loadError: function (jqXHR, textStatus, errorThrown) {
        alert('HTTP status code: ' + jqXHR.status + '\n' +
              'textStatus: ' + textStatus + '\n' +
              'errorThrown: ' + errorThrown);
        alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
    }
});

which display the alert message like the following:

显示如下所示的警报消息：

Moreover in the jqXHR.responseTextyou will find the full body of the server responseas as string. The next alert shows the response.

此外，jqXHR.responseText您会在 中找到作为字符串的服务器响应的完整正文。下一个警报显示响应。

With all above information I wanted to show you that error responses and successful responses will be processed in another way by the whole stack of software which you use (jqGrid, jQuery, XMLHttpRequestobject, ...). So you should just use error HTTP status codesin the server responses if the error will be detected. In the answerfor example you will see how to do this in case of the usage ASP.NET MVC.

有了以上所有信息，我想向您展示错误响应和成功响应将由您使用的整个软件堆栈（jqGrid、jQuery、XMLHttpRequest对象...）以另一种方式处理。因此，如果将检测到错误，您应该只在服务器响应中使用错误 HTTP 状态代码。例如，在答案中，您将看到在使用 ASP.NET MVC 的情况下如何执行此操作。

Hereyou can find another version of the loadErrorimplementation which wait the input in the JSON form: {"Source":"some error source",Message:"Description of the error"}, and the error output will be like here

在这里您可以找到另一个版本的loadError实现，它等待 JSON 形式的输入：{"Source":"some error source",Message:"Description of the error"}，错误输出将如下所示

but the code can display additionally HTML response generated by your web server:

但该代码可以额外显示由您的 Web 服务器生成的 HTML 响应：

You can easy modify the code to your purpose. The code you can find below

您可以根据自己的目的轻松修改代码。您可以在下面找到的代码

loadComplete: function () {
    // remove error div if exist
    $('#' + this.id + '_err').remove();
},
loadError: function (jqXHR, textStatus, errorThrown) {
    // remove error div if exist
    $('#' + this.id + '_err').remove();

    // insert div with the error description before the grid
    $(this).closest('div.ui-jqgrid').before(
        '<div id="' + this.id + '_err" style="max-width:' + this.style.width +
            ';"><div class="ui-state-error ui-corner-all" style="padding:0.7em;float:left;">' +
            decodeErrorMessage(jqXHR, textStatus, errorThrown) +
            '</div><div style="clear:left"/></div>'
    );
}

where the decodeErrorMessagefunction defined as

其中decodeErrorMessage函数定义为

var decodeErrorMessage = function (jqXHR, textStatus, errorThrown) {
        var htmlBody, errorInfo, i, errorText = '',
            errorIconSpan = '<span class="ui-icon ui-icon-alert" style="float:left; display: inline-block; margin-right: .3em;"></span>';
        if (textStatus) {
            errorText = textStatus;
        }
        if (errorThrown) {
            if (errorText.length > 0) {
                errorText += '<hr/>';
            }
            errorText += errorThrown;
        }
        if (typeof (jqXHR.responseText) === "string") {
            if (jqXHR.responseText.charAt(0) === '[') {
                try {
                    errorInfo = $.parseJSON(jqXHR.responseText);
                    errorText = "";
                    for (i = 0; i < errorInfo.length; i += 1) {
                        if (errorText.length !== 0) {
                            errorText += "<hr/>";
                        }
                        errorText += errorInfo[i].Source + ": " + errorInfo[i].Message;
                    }
                } catch (e) { }
                errorText = errorIconSpan + errorText;
            } else {
                htmlBody = /<body.*?>([\s\S]*)<\/body>/i.exec(jqXHR.responseText);
                if (htmlBody !== null && htmlBody.length > 1) {
                    errorText = htmlBody[1];
                }
            }
        } else {
            errorText = errorIconSpan + errorText;
        }
        return '<div style="float:left">' + errorText + '</div>';
    };

UPDATE: Free jqGridcontains default implementationof loadError(see hereand here), which generates relatively readable error message in case of the most Ajax errors. It displays the resulting text in the error div, existing above the body of the grid. Thus it's recommended to test, whether the default behavior produce good results before usage of custom loadError. If you really need to create your own loadErrorthen you can place the error message in the error div using displayErrorMessagemethod of free jqGrid: $("#grid").jqGrid("displayErrorMessage", customErrorMessage);

UPDATE：免费的jqGrid包含默认实现的loadError（见这里和这里），这在大多数Ajax错误的情况下产生相对可读的错误信息。它在错误 div 中显示结果文本，存在于网格主体上方。因此，建议在使用 custom 之前测试默认行为是否会产生良好的结果loadError。如果你真的需要创建你自己的，loadError那么你可以使用displayErrorMessagefree jqGrid 的方法将错误消息放在错误 div 中：$("#grid").jqGrid("displayErrorMessage", customErrorMessage);

回答by LeftyX

I was looking for a similiar problem some time ago and bumped into this answer. Read Oleg's answer. He's the jqgrid man ;-)

前段时间我正在寻找一个类似的问题并遇到了这个答案。阅读奥列格的回答。他是 jqgrid 人 ;-)