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()方法把传输的
值进行解码。
先上图片，无图无真相么！哈哈！
具体请看代码吧：
页面代码:
01 |
<link rel="stylesheet" href="JqueryUi/themes/base/jquery.ui.all.css" /> //这个css文件要先放到最前面，否则可能报未定义错误 |
02 |
|
03 |
<script type="text/javascript" src="JqueryUi/jquery-1.4.2.min.js"></script> |
04 |
|
05 |
<script type="text/javascript" src="JqueryUi/ui/jquery.ui.core.js"></script> |
06 |
|
07 |
<script type="text/javascript" src="JqueryUi/ui/jquery.ui.widget.js"></script> |
08 |
|
09 |
<script type="text/javascript" src="JqueryUi/ui/jquery.ui.position.js"></script> |
10 |
|
11 |
<script type="text/javascript" src="JqueryUi/ui/jquery.ui.autocomplete.js"></script |
12 |
|
13 |
|
14 |
<script language="javascript" type="text/javascript"> |
15 |
|
16 |
$(function() { |
17 |
$("#search").autocomplete({ |
18 |
source: function(request, response) { |
19 |
$.ajax({ |
20 |
url: "UserControl/GetService.ashx", |
21 |
dataType: "json", |
22 |
data: request, |
23 |
success: function(data) { |
24 |
response(data); |
25 |
}, |
26 |
}); |
27 |
} |
28 |
}); |
29 |
}); |
30 |
|
31 |
|
32 |
<div> |
33 |
<input id="search" type="text" /> |
34 |
</div> |
后台处理类：
01 |
<%@ WebHandler Language="C#" Class="GetService" %> |
02 |
|
03 |
using System; |
04 |
using System.Web; |
05 |
|
06 |
public class GetService : IHttpHandler |
07 |
{ |
08 |
|
09 |
public void ProcessRequest(HttpContext context) |
10 |
{ |
11 |
if (context.Request.QueryString["term"] != null && context.Request.QueryString["term"] != "") |
12 |
{ |
13 |
context.Response.Clear(); |
14 |
//context.Response.Charset = "gb2312"; |
15 |
context.Response.Buffer = true; |
16 |
//context.Response.ContentEncoding = System.Text.Encoding.UTF8; |
17 |
context.Response.ContentType = "text/plain"; |
18 |
|
19 |
string ss = System.Web.HttpUtility.UrlDecode(context.Request.QueryString["term"]); |
20 |
|
21 |
//GetQueryString(context.Request.QueryString["term"],false) |
22 |
|
23 |
context.Response.Write(GetLikeUserName(ss)); |
24 |
context.Response.Flush(); |
25 |
context.Response.Close(); |
26 |
context.Response.End(); |
27 |
} |
28 |
} |
29 |
|
30 |
/// <summary> |
31 |
/// 拼接json |
32 |
/// </summary> |
33 |
/// <param name="key">关键词</param> |
34 |
/// <returns></returns> |
35 |
private String GetLikeUserName(string key) |
36 |
{ |
37 |
//System.Text.Encoding.Convert( |
38 |
if (key == null) return "[\"\"]";<BR> |
01 |
// 这里就是获取数据源，大家自己写了 |
02 |
System.Data.DataSet ds = Angel.Data.DatabaseHelper.ExecuteDataset("Select * from Services where Service like '%" + key + "%'", "1"); |
03 |
int length = ds.Tables[0].Rows.Count; |
04 |
if (length == 0) return "[\"\"]"; |
05 |
string[] listWord; |
06 |
if (length > 10) |
07 |
{ |
08 |
listWord = new string[10]; |
09 |
} |
10 |
else |
11 |
{ |
12 |
listWord = new string[length]; |
13 |
} |
14 |
for (int i = 0; i < length; i++) |
15 |
{ |
16 |
if (i <= 9) |
17 |
{ |
18 |
listWord[i] = ds.Tables[0].Rows[i]["Service"].ToString(); |
19 |
} |
20 |
else break; |
21 |
} |
22 |
//搜索,返回10个关键词 |
23 |
System.Text.StringBuilder sbstr = new System.Text.StringBuilder("["); |
24 |
int ct = listWord.Length; |
25 |
for (int i = 0; i < ct; i++) |
26 |
{ |
27 |
sbstr.Append("\"" + listWord[i] + "\""); |
28 |
if (i == ct - 1) |
29 |
sbstr.Append("]"); |
30 |
else |
31 |
sbstr.Append(","); |
32 |
} |
33 |
return sbstr.ToString(); |
34 |
} |
35 |
public bool IsReusable |
36 |
{ |
37 |
get |
38 |
{ |
39 |
return false; |
40 |
} |
41 |
} |
42 |
|
43 |
} |
下面是最重要的代码了！我们知道像上面那样当GetService.ashx这个类收到 QueryString 时显示的肯定是乱码！
好了打开你引用的 jquery.ui.autocomplete.js 我们来修改以下内容
01 |
search: function(value, event) { |
02 |
value = value != null ? value : this.element.val(); |
03 |
|
04 |
value = encodeURI(value); // 请注意这行代码，是后加上去的 |
05 |
// always save the actual value, not the one passed as an argument |
06 |
this.term = this.element.val(); |
07 |
08 |
if (value.length < this.options.minLength) { |
09 |
return this.close(event); |
10 |
} |
11 |
12 |
clearTimeout(this.closing); |
13 |
if (this._trigger("search") === false) { |
14 |
return; |
15 |
} |
16 |
17 |
return this._search(value); |
18 |
}, |
查找到 search 这个函数，然后按上面的修改完保存退出！好大功告成！
好了，基本先到这！有什么问题以后我会补充的！今天过的真纠结啊。。。
祝大家开心！
浙公网安备 33010602011771号