asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼
更新時間:2010年09月19日 21:28:18 作者:
asp.net下使用jquery 的ajax+WebService+json 實(shí)現(xiàn)無刷新取后臺值的實(shí)現(xiàn)代碼 ,比頁面刷新更好,用戶體驗更好,需要的朋友可以參考下。
首先貼上Jquery的ajax:
$.ajax({
url: 'ws_Ajax.asmx/BindDictByUpper',
type: 'POST',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: '{ PpareId:"' + varlue + '"}',
success: function (data) {
var dataObj = eval("(" + data + ")");
// $('#myList').html('');
// for (var i = 0; i < msg.d.length; i++) {
// $('#myList').append('<li>' + msg.d[i] + '</li>');
// }
alert(dataObj);
$.each({ name: "John", lang: "JS" }, function (i, n) {
alert("Name: " + i + ", Value: " + n);
});
$.each(dataObj, function (idx, item) {
if (idx == 0) {
return true; //同countinue,返回false同break
}
alert("name:" + item['name'] + ",value:" + item['value']);
});
},
//data: '{query:"' + $('#editQuery').val() + '"}',
processData: false
});
好,前臺寫好,建一個webservice頁,寫上方法:
/// <summary>
/// Datatable轉(zhuǎn)換為Json
/// </summary>
/// <param name="table">Datatable對象</param>
/// <returns>Json字符串</returns>
public static string ToJson(DataTable Adt)
{
StringBuilder jsonString = new StringBuilder();
jsonString.Append("[");
foreach (DataRow pdr in Adt.Rows)
{
jsonString.Append("{");
jsonString.AppendFormat("name:\"{0}\",value:\"{1}\"", pdr["字典內(nèi)容"].ToString(), pdr["序號"].ToString());
jsonString.Append("},");
// jsonString.AppendFormat("{name:'{0}',value:'{1}'},", pdr["字典內(nèi)容"].ToString(), pdr["序號"].ToString());
}
jsonString.Remove(jsonString.Length - 1, 1);
jsonString.Append("]");
return jsonString.ToString();
}
然后嘗試著運(yùn)行,這是出問題列,無論怎樣運(yùn)行都不能調(diào)到后臺方法:
最后在網(wǎng)上查列好久
才發(fā)現(xiàn)在新建的webservice頁少了一句關(guān)鍵的話:
[System.Web.Script.Services.ScriptService]
在類前面加上這句話就可以了
加上以后再運(yùn)行,好,可以調(diào)到后臺了
后臺的數(shù)據(jù)也發(fā)送到前臺
但又出現(xiàn)問題列,發(fā)過來的數(shù)據(jù)不能以解析出來json數(shù)據(jù)
按網(wǎng)上說的,只要把a(bǔ)jax中的dataType設(shè)置為json就行了,但是實(shí)際上不行,然后在網(wǎng)上查了下:
1、對于服務(wù)器返回的JSON字符串,如果jquery異步請求沒做類型說明,或者以字符串方式接受,那么需要做一次對象化處理,方式不是太麻煩,就是將該字符串放于eval()中執(zhí)行一次
2.對于服務(wù)器返回的JSON字符串,如果jquery異步請求將type(一般為這個配置屬性)設(shè)為“json”,或者利用$.getJSON()方法獲得服務(wù)器返回,那么就不需要eval()方法了,因為這時候得到的結(jié)果已經(jīng)是json對象了,只需直接調(diào)用該對象即可,這里以$.getJSON方法為例說明數(shù)據(jù)處理方法
但是我把他的dataType設(shè)置為json,應(yīng)該直接可以用le?
于是我把傳回來的數(shù)據(jù)放在eval()方法里面處理了下,再調(diào)用就可以le?
這樣前臺調(diào)出來的數(shù)據(jù)就可以直接按你需要的方式處理了。
我這里還又一個疑問:
我用這種方式取數(shù)為什么查不出來數(shù)據(jù)(我對json不是很熟,第一次用):
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
網(wǎng)上看的這樣方式頁可以調(diào)用json數(shù)據(jù),知道的給解答下……
復(fù)制代碼 代碼如下:
$.ajax({
url: 'ws_Ajax.asmx/BindDictByUpper',
type: 'POST',
contentType: 'application/json;charset=utf-8',
dataType: 'json',
data: '{ PpareId:"' + varlue + '"}',
success: function (data) {
var dataObj = eval("(" + data + ")");
// $('#myList').html('');
// for (var i = 0; i < msg.d.length; i++) {
// $('#myList').append('<li>' + msg.d[i] + '</li>');
// }
alert(dataObj);
$.each({ name: "John", lang: "JS" }, function (i, n) {
alert("Name: " + i + ", Value: " + n);
});
$.each(dataObj, function (idx, item) {
if (idx == 0) {
return true; //同countinue,返回false同break
}
alert("name:" + item['name'] + ",value:" + item['value']);
});
},
//data: '{query:"' + $('#editQuery').val() + '"}',
processData: false
});
好,前臺寫好,建一個webservice頁,寫上方法:
復(fù)制代碼 代碼如下:
/// <summary>
/// Datatable轉(zhuǎn)換為Json
/// </summary>
/// <param name="table">Datatable對象</param>
/// <returns>Json字符串</returns>
public static string ToJson(DataTable Adt)
{
StringBuilder jsonString = new StringBuilder();
jsonString.Append("[");
foreach (DataRow pdr in Adt.Rows)
{
jsonString.Append("{");
jsonString.AppendFormat("name:\"{0}\",value:\"{1}\"", pdr["字典內(nèi)容"].ToString(), pdr["序號"].ToString());
jsonString.Append("},");
// jsonString.AppendFormat("{name:'{0}',value:'{1}'},", pdr["字典內(nèi)容"].ToString(), pdr["序號"].ToString());
}
jsonString.Remove(jsonString.Length - 1, 1);
jsonString.Append("]");
return jsonString.ToString();
}
然后嘗試著運(yùn)行,這是出問題列,無論怎樣運(yùn)行都不能調(diào)到后臺方法:
最后在網(wǎng)上查列好久
才發(fā)現(xiàn)在新建的webservice頁少了一句關(guān)鍵的話:
復(fù)制代碼 代碼如下:
[System.Web.Script.Services.ScriptService]
在類前面加上這句話就可以了
加上以后再運(yùn)行,好,可以調(diào)到后臺了
后臺的數(shù)據(jù)也發(fā)送到前臺
但又出現(xiàn)問題列,發(fā)過來的數(shù)據(jù)不能以解析出來json數(shù)據(jù)
按網(wǎng)上說的,只要把a(bǔ)jax中的dataType設(shè)置為json就行了,但是實(shí)際上不行,然后在網(wǎng)上查了下:
1、對于服務(wù)器返回的JSON字符串,如果jquery異步請求沒做類型說明,或者以字符串方式接受,那么需要做一次對象化處理,方式不是太麻煩,就是將該字符串放于eval()中執(zhí)行一次
2.對于服務(wù)器返回的JSON字符串,如果jquery異步請求將type(一般為這個配置屬性)設(shè)為“json”,或者利用$.getJSON()方法獲得服務(wù)器返回,那么就不需要eval()方法了,因為這時候得到的結(jié)果已經(jīng)是json對象了,只需直接調(diào)用該對象即可,這里以$.getJSON方法為例說明數(shù)據(jù)處理方法
但是我把他的dataType設(shè)置為json,應(yīng)該直接可以用le?
于是我把傳回來的數(shù)據(jù)放在eval()方法里面處理了下,再調(diào)用就可以le?
這樣前臺調(diào)出來的數(shù)據(jù)就可以直接按你需要的方式處理了。
我這里還又一個疑問:
我用這種方式取數(shù)為什么查不出來數(shù)據(jù)(我對json不是很熟,第一次用):
復(fù)制代碼 代碼如下:
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue,返回false同break
}
alert("name:"+item.name+",value:"+item.value);
});
});
網(wǎng)上看的這樣方式頁可以調(diào)用json數(shù)據(jù),知道的給解答下……
您可能感興趣的文章:
- Jquery + Ajax調(diào)用webService實(shí)例代碼(asp.net)
- jQuery AJAX 調(diào)用WebService實(shí)現(xiàn)代碼
- 關(guān)于jquery ajax 調(diào)用帶參數(shù)的webservice返回XML數(shù)據(jù)一個小細(xì)節(jié)
- jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實(shí)例代碼
- Jquery ajax傳遞復(fù)雜參數(shù)給WebService的實(shí)現(xiàn)代碼
- Jquery Ajax學(xué)習(xí)實(shí)例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用
- Jquery Ajax學(xué)習(xí)實(shí)例3 向WebService發(fā)出請求,調(diào)用方法返回數(shù)據(jù)
- Jquery Ajax學(xué)習(xí)實(shí)例4 向WebService發(fā)出請求,返回實(shí)體對象的異步調(diào)用
- Jquery Ajax學(xué)習(xí)實(shí)例5 向WebService發(fā)出請求,返回泛型集合數(shù)據(jù)的異步調(diào)用
- jQuery ajax調(diào)用webservice注意事項
相關(guān)文章
Jquery實(shí)現(xiàn)自定義tooltip示例代碼
這篇文章主要介紹了Jquery實(shí)現(xiàn)自定義tooltip的方法,需要的朋友可以參考下2014-02-02AspNet中使用JQuery boxy插件的確認(rèn)框
Boxy是一個基于JQuery的彈出層插件,它有相對漂亮的外觀,功能齊全,支持iframe,支持模式窗口但相對于同樣的彈出層插件BlockUI它明顯笨重,但使用不那么方便。 兼容瀏覽器:IE6+/Firefox/Google Chrome2015-05-05Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理(上)
本文將采用Jquery+Ajax+PHP+MySQL來實(shí)現(xiàn)一個客戶分類列表的管理,如何利用Ajax和Json技術(shù)讓用戶操作起來覺得更輕松,感興趣的小伙伴們可以參考一下2015-10-10jQuery實(shí)現(xiàn)的簡單動態(tài)添加、刪除表格功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡單動態(tài)添加、刪除表格功能,涉及jQuery事件響應(yīng)及表格元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-09-09基于jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單
這篇文章主要介紹了jQuery實(shí)現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01jQuery插件simplePagination的使用方法示例
這篇文章主要介紹了jQuery插件simplePagination的使用方法,結(jié)合實(shí)例形式分析了jQuery插件simplePagination實(shí)現(xiàn)表單分頁相關(guān)操作技巧與注意事項,需要的朋友可以參考下2020-04-04