jQuery UI Autocomplete 使用 ajax 方法传输Json数据出现乱码问题的解决

 

平台:Vs2008

jQuery 1.4.2

jquery.ui.autocomplete.js 1.8.5

方法概述：在ajax传输数据时把jquery.ui.autocomplete.js 中的传输值改成encodeURI() 形式，然后在后台处理代码里再用System.Web.HttpUtility.UrlDecode()方法把传输的
值进行解码。

 

先上图片，无图无真相么！哈哈！

 

具体请看代码吧：
页面代码:

 

  <link rel="stylesheet" href="JqueryUi/themes/base/jquery.ui.all.css" />  //这个css文件要先放到最前面，否则可能报未定义错误

    <script type="text/javascript" src="JqueryUi/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="JqueryUi/ui/jquery.ui.core.js"></script>

    <script type="text/javascript" src="JqueryUi/ui/jquery.ui.widget.js"></script>

    <script type="text/javascript" src="JqueryUi/ui/jquery.ui.position.js"></script>

    <script type="text/javascript" src="JqueryUi/ui/jquery.ui.autocomplete.js"></script


<script language="javascript" type="text/javascript">

    $(function() {
        $("#search").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "UserControl/GetService.ashx",
                    dataType: "json",
                    data: request,
                    success: function(data) {
                        response(data);
                    },
                });
            }
        });
    });


 <div>
        <input id="search" type="text" />
    </div>

 

 

后台处理类：

 

<%@ WebHandler Language="C#" Class="GetService" %>

using System;
using System.Web;

public class GetService : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        if (context.Request.QueryString["term"] != null && context.Request.QueryString["term"] != "")
        {
            context.Response.Clear();
            //context.Response.Charset = "gb2312";
            context.Response.Buffer = true;
            //context.Response.ContentEncoding = System.Text.Encoding.UTF8;
            context.Response.ContentType = "text/plain";

            string ss = System.Web.HttpUtility.UrlDecode(context.Request.QueryString["term"]);
            
            //GetQueryString(context.Request.QueryString["term"],false)

            context.Response.Write(GetLikeUserName(ss));
            context.Response.Flush();
            context.Response.Close();
            context.Response.End();
        }
    }

  /// <summary>
    /// 拼接json
    /// </summary>
    /// <param name="key">关键词</param>
    /// <returns></returns>
    private String GetLikeUserName(string key)
    {
        //System.Text.Encoding.Convert(
        if (key == null) return "[\"\"]";

　　　　// 这里就是获取数据源，大家自己写了
        System.Data.DataSet ds = Angel.Data.DatabaseHelper.ExecuteDataset("Select * from Services where Service like '%" + key + "%'", "1");
        int length = ds.Tables[0].Rows.Count;
        if (length == 0) return "[\"\"]";
        string[] listWord;
        if (length > 10)
        {
            listWord = new string[10];
        }
        else
        {
            listWord = new string[length];
        }
        for (int i = 0; i < length; i++)
        {
            if (i <= 9)
            {
                listWord[i] = ds.Tables[0].Rows[i]["Service"].ToString();
            }
            else break;
        }
        //搜索,返回10个关键词
        System.Text.StringBuilder sbstr = new System.Text.StringBuilder("[");
        int ct = listWord.Length;
        for (int i = 0; i < ct; i++)
        {
            sbstr.Append("\"" + listWord[i] + "\"");
            if (i == ct - 1)
                sbstr.Append("]");
            else
                sbstr.Append(",");
        }
        return sbstr.ToString();
    }
        public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}

下面是最重要的代码了！我们知道像上面那样当GetService.ashx这个类收到 QueryString 时显示的肯定是乱码！

好了打开你引用的 jquery.ui.autocomplete.js 我们来修改以下内容

 

 

 search: function(value, event) {
            value = value != null ? value : this.element.val();
            
            value = encodeURI(value);  // 请注意这行代码，是后加上去的
            // always save the actual value, not the one passed as an argument
            this.term = this.element.val();

            if (value.length < this.options.minLength) {
                return this.close(event);
            }

            clearTimeout(this.closing);
            if (this._trigger("search") === false) {
                return;
            }

            return this._search(value);
        },

 

查找到 search 这个函数，然后按上面的修改完保存退出！好大功告成！

 

好了，基本先到这！有什么问题以后我会补充的！今天过的真纠结啊。。。

祝大家开心！

 

-------------------------------------------------------------------------------------------------------------------