AJAX JQuery 调用后台方法返回值（不刷新页面）

AJAX JQuery 调用后台方法返回值（不刷新页面）

（1）无参数返回值（本人亲试返回结果不是预期结果）

javascript方法：

$(function () {

//无参数返回值

$("#btn_Ajax1").click(function () {

$.ajax({

type: "Post",

//方法所在页面和方法名

url:
"Ajax_Test.aspx/getValueByAjaxNoParms",

contentType: "application/json; charset=utf-8",

dataType: "json",

beforeSend: function (XMLHttpRequest) {

$('#show').text("正在查询");

},

success: function (data) {

//返回的数据用data.d获取内容

alert(data.d);

},

error: function (err) {

alert(err);

}

});

//禁用按钮的提交

return false;

});

后台方法：

//[System.Web.Services.WebMethod()]

//不带参数

[WebMethod()]

public static string getValueByAjaxNoParms()

{

string ddd = "返回 GAGAHJT";

return ddd.ToString();

}

（2）带参数返回值

javascript方法：

//带参数

$("#btn_Ajax2").click(function () {

$.ajax({

type: "Post",

url: "Ajax_Test.aspx/getValueByAjaxByParms",

//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字

data: "{'str':'我是','str2':'XXX','str3':'是不是？'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

//返回的数据用data.d获取内容

alert(data.d);

},

error: function (err) {

alert(err);

}

});

//禁用按钮的提交

return false;

});

后台方法：

//带参数

[WebMethod]

public static string getValueByAjaxByParms(string str, string str2,
string str3)

{

return str + str2 + str3;

}

（3）返回数组

javascript方法：

//返回数组

$("#btn_Ajax3").click(function () {

$.ajax({

type: "Post",

url: "Ajax_Test.aspx/getArrayByAjax",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

//插入前先清空ul

$("#show").html("");

//递归获取数据

$(data.d).each(function () {

//插入结果到li里面

$("#show").append("<li>" + this +
"</li>");

});

alert(data.d);

},

error: function (err) {

alert(err);

}

});

//禁用按钮的提交

return false;

});

后台方法：

//返回数组

[WebMethod]

public static List<string>
getArrayByAjax()

{

List<string> li = new
List<string>();

for (int i = 0; i < 10; i++)

li.Add(i + "");

return li;

}

（4）返回hashtable

javascript方法：

//返回hashtable

$("#btn_Ajax4").click(function () {

$.ajax({

type: "Post",

url: "Ajax_Test.aspx/geHashtableByAjax",

//记得加双引号
T_T

data: "{ 'key': 'haha', 'value': '哈哈！' }",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

//debugger;

alert("key: haha ==> " + data.d["haha"] + "\n key:
www ==> " + data.d["www"]);

},

error: function (err) {

alert(err + "err");

}

});

//禁用按钮的提交

return false;

});

后台方法：

//Hashtable

[WebMethod]

public static Hashtable geHashtableByAjax(string key, string
value)

{

Hashtable hs = new Hashtable();

hs.Add("www", "yahooooooo");

hs.Add(key, value);

return hs;

}

（5）返回DataTable

javascript方法：

//返回DataTable（json）1

$("#btn_Ajax5").click(function () {

$.ajax({

type: "Post",

url: "Ajax_Test.aspx/geDataTableByAjax1",

data: "{'str':'我是','str2':'XXX','str3':'是不是？'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

//debugger;

//你可以
alert(data.d)看数据返回的格式

data = jQuery.parseJSON(data.d);

// JSON再次转换为Table
形式；

//可以是用
data[Row][Column].toString()来读取值；Row：第几行
Column：数据字段

//alert(data[0]["ID"].toString() + ";"+data[0]["Name"].toString() +
";"+data[0]["Address"].toString());

t = "<table border='1'>";

$.each(data, function (i, item) {

t += "<tr>";

t += "<td>" + item.ID +
"</td>";

t += "<td>" + item.Name +
"</td>";

t += "<td>" + item.Address +
"</td>";

t += "</tr>";

})

t += "</table>";

$("#show").html(t);

//$('#Div1').html(BuildDetails(data));

},

error: function (err) {

alert(err + "err");

}

});

//禁用按钮的提交

return false;

});

后台方法：

//Json

//在前台通过jQuery.parseJSON(data.d); 转换为类似Table

[WebMethod]

public static string geDataTableByAjax1(string str, string str2,
string str3)

{

DataTable dt = new DataTable();

dt.TableName = "表名";

dt.Columns.Add("ID", typeof(Int32));

dt.Columns.Add("Name", typeof(string));

dt.Columns.Add("Address", typeof(string));

for (int i = 0; i < 5; i++)

{

DataRow dr = dt.NewRow();

dr["ID"] = i.ToString();

dr["Name"] = "JSON" + i.ToString();

dr["Address"] = "中国-北京-海淀" + i.ToString() + "号";

dt.Rows.Add(dr);

}

string strss = Dtb2Json(dt).ToString();

return strss.ToString();

}

（5）返回DataTable

javascript方法：

//返回DataTable（json）2

$("#btn_Ajax6").click(function () {

$.ajax({

type: "post",

url: "Ajax_Test.aspx/geDataTableByAjax2",

//data:
"{}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

//debugger;

var mydts = data.d.mytablename;

//这里也可以接受类似 DataSet
的对象；

$('#Div1').html(BuildDetails(mydts));

$('#Div2').html(BuildTable(mydts));

},

failure: function () {

alert("error")

}

});

});

});

后台方法：

//json

[WebMethod]

public static Dictionary<string,
object> geDataTableByAjax2()

{

DataTable dt = new DataTable();

dt.TableName = "mytablename";

dt.Columns.Add("ID", typeof(Int32));

dt.Columns.Add("Name", typeof(string));

dt.Columns.Add("Address", typeof(string));

for (int i = 0; i < 5; i++)

{

DataRow dr = dt.NewRow();

dr["ID"] = i.ToString();

dr["Name"] = "JSON" + i.ToString();

dr["Address"] = "中国-北京-海淀" + i.ToString() + "号";

dt.Rows.Add(dr);

}

return DatToJson(dt);

}

前台数据转换方法

//解析DataTable(非真正的Table)

function BuildDetails(dataTable) {

var content = [];

for (var row in dataTable) {

for (var column in dataTable[row]) {

content.push("<tr>");

content.push("<td><b>");

content.push(column);
content.push("</td></b>");

content.push("<td>");

content.push(dataTable[row][column]);

content.push("</td>");
content.push("</tr>");

}

}

var top = "<table border='1'
class='dvhead'>";

var bottom = "</table>";

return top + content.join("") + bottom;

}

function BuildTable(dataTable) {

var headers = [];

var rows = [];

//column

headers.push("<tr>");

for (var column in dataTable[0])

headers.push("<td><b>"
+ column +
"</b></td>");

headers.push("</tr>");

//row

for (var row in dataTable) {

rows.push("<tr>");

for (var column in dataTable[row]) {

rows.push("<td>");

rows.push(dataTable[row][column]);

rows.push("</td>");

}

rows.push("</tr>");

}

var top = "<table border='1'
class='gvhead'>";

var bottom = "</table>"; return top +
headers.join("") + rows.join("") + bottom;

}

后台数据转换方法

#region DataTable转Json

public static string Dtb2Json(DataTable dtb)

{

JavaScriptSerializer jss = new JavaScriptSerializer();

ArrayList dic = new ArrayList();

foreach (DataRow row in dtb.Rows)

{

Dictionary<string, object> drow = new
Dictionary<string, object>();

foreach (DataColumn col in dtb.Columns)

{

drow.Add(col.ColumnName, row[col.ColumnName]);

}

dic.Add(drow);

}

return jss.Serialize(dic);

}

#endregion

#region Json转DataTable

public static DataTable Json2Dtb(string json)

{

JavaScriptSerializer jss = new JavaScriptSerializer();

ArrayList dic =
jss.Deserialize<ArrayList>(json);

DataTable dtb = new DataTable();

if (dic.Count > 0)

{

foreach (Dictionary<string, object>
drow in dic)

{

if (dtb.Columns.Count == 0)

{

foreach (string key in drow.Keys)

{

dtb.Columns.Add(key, drow[key].GetType());

}

}

DataRow row = dtb.NewRow();

foreach (string key in drow.Keys)

{

row[key] = drow[key];

}

dtb.Rows.Add(row);

}

}

return dtb;

}

#endregion

#region DataTable转Json(非Json)

//类似前台jQuery.parseJSON（dt）函数

private static Dictionary<string,
object> DatToJson(DataTable table)

{

Dictionary<string, object> d = new
Dictionary<string, object>();

d.Add(table.TableName, RowsToDictionary(table));

return d;

}

private static
List<Dictionary<string,
object>> RowsToDictionary(DataTable
table)

{

List<Dictionary<string,
object>> objs = new
List<Dictionary<string,
object>>();

foreach (DataRow dr in table.Rows)

{

Dictionary<string, object> drow = new
Dictionary<string, object>();

for (int i = 0; i < table.Columns.Count; i++)

{

drow.Add(table.Columns[i].ColumnName, dr[i]);

}

objs.Add(drow);

}

return objs;

}

#endregion