在jQuery Tag it UI小部件上获取错误加载资源失败

本文关键字：取错误 获取 加载 资源 失败 Tag jQuery it UI 小部 | 更新日期: 2023-09-27 17:59:46

我在Asp.net中使用jQuery UI小部件TagIt。代码运行良好，但我想突出显示列表中不可用的标记。

以前我问过这个问题，并使用相同的方法突出显示列表中不可用的标签

我的代码是

.aspx代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link href="../CSS/jquery.tagit.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
          <script src="../JavaScript/tag-it.js"></script>
        <link href="../CSS/tagit.ui-zendesk.css" rel="stylesheet" />
    <script>
    $(function () {
        $.ajax({
            url: 'UpdateSingImgKwds.aspx/GetKeywords',
            type: 'GET',
            datatype: "json",
            contentType: "application/json; charset=utf-8",
            success: function (res) {
                console.log(res.d);

                $('#singleFieldTags').tagit({
                    caseSensitive: false,
                    availableTags: res.d,
                    allowSpaces: true,
                    singleField: true,
                    singleFieldNode: $('#txtCompKwds'),
                    beforeTagAdded: function (event, ui) {
                        if ((res.d).indexOf(ui.tagLabel.toLowerCase()) == -1) {
                            $(ui.tag).css('background', '#F9999A')
                        }
                    }
                });

            },
            failure: function (err) {
                alert(err);
            }
        });   

    });

CS代码

   [WebMethod]
    [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
    public static string[] GetKeywords()
    {
        List<string> lst = new List<string>();
        string queryString = "select Keyword from SIB_KWD_Library";
        using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["vConnString"].ToString()))
        {
            using (SqlCommand command = new SqlCommand(queryString, connection))
            {
                connection.Open();
                using (SqlDataReader reader = command.ExecuteReader())
                {
                    while (reader.Read())
                    {
                        lst.Add(reader["Keyword"].ToString());
                    }
                }
            }
        }
        lst = lst.ConvertAll(d => d.ToLower());
        return lst.ToArray();
    }

当数组列表长度达到7345时，其获取错误resource: the server responded with a status of 500 (Internal Server Error)

JS Fiddle

遇到问题，请帮忙。

在jQuery Tag it UI小部件上获取错误加载资源失败

这可能是因为JSON长度限制，只需将其添加到您的web配置中即可

<configuration>
<system.web.extensions>
    <scripting>
        <webServices> 
            <jsonSerialization maxJsonLength="50000000"/> 
        </webServices> 
    </scripting> 
</system.web.extensions> 
</configuration>

好吧，问题出在您作为结果发送回的数据长度上，当跟踪时，我经常在控制台中得到以下错误消息：

使用JSON进行序列化或反序列化时出错JavaScriptSerializer。字符串的长度超过了设置的值在maxJsonLength属性上

因此，您需要在web.config文件中进行设置，以允许maxJsonLength用于jsonSerialization，如下所示：

<system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="2147483644"/> //This is the max value for integer
      </webServices>
    </scripting>
</system.web.extensions>

我想对你的webmethod和加载源的方式做一些更改，如下所示：

Webmethod

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static List<string> GetKeywords()
{
    List<string> lst = new List<string>();
    string queryString = "select Keyword from SIB_KWD_Library";
    using (SqlConnection connection = new SqlConnection(ConfigurationManager.AppSettings["vConnString"].ToString()))
    {
        connection.Open();
        using (SqlCommand command = new SqlCommand(queryString, connection))
        {
            using (SqlDataReader reader = command.ExecuteReader())
            {
                while (reader.Read())
                {
                    lst.Add(reader["Keyword"].ToString());
                }
            }
        }
    }
    lst = lst.ConvertAll(d => d.ToLower());
    return lst; //return it as list itself
}

现在您调用ajax的方式来源：

$(document).ready(function () {
     var source = []; //declare a source array
     $.when(//get the source first
            $.ajax({
                url: '<%= ResolveUrl("Default.aspx/GetKeywords") %>',
                type: 'GET',
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                success: function (res) {
                    source = res.d;
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                }
            })
     ).done(function () { //once done assign it as you cannot directly assign the source as availableTags:res.d
            $('#mySingleFieldTags').tagit({
                  caseSensitive: false,
                  availableTags: source,
                  allowSpaces: true,
                  singleField: true,
                  singleFieldNode: $('#txtCompKwds'),
                  beforeTagAdded: function (event, ui) {
                       console.log(source);
                       if ((source).indexOf(ui.tagLabel.toLowerCase()) == -1) {
                            $(ui.tag).css('background', '#F9999A')
                        }
                  }
             });
     });
});

完成所有操作后，请检查控制台。您将获得值的数组。

注意：要检查错误，只需在web.config文件中删除上述设置，保留所有提到的其他代码，并在完成后检查控制台

相关文章：