DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> jQuery UI Autocomplete 使用 ajax 方法傳輸Json數據出現亂碼問題的解決
jQuery UI Autocomplete 使用 ajax 方法傳輸Json數據出現亂碼問題的解決
編輯：AJAX詳解
平台: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 這個函數，然後按上面的修改完保存退出！好大功告成！
小編推薦
熱門推薦