利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod] 命名空间
1、无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明
后台<C#>:
using
System.Web.Script.Services;
[WebMethod]
public
static
string
SayHello()
{
return
"Hello
Ajax!";
}
前台<jQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
//要用post方式
type:
"Post"
,
//方法所在页面和方法名
url:
"data.aspx/SayHello"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
//返回的数据用data.d获取内容
alert(data.d);
},
error:
function
(err)
{
alert(err);
}
});
//禁用按钮的提交
return
false
;
});
});
2、带参数的方法调用
后台<C#>:
using
System.Web.Script.Services;
[WebMethod]
public
static
string
GetStr(
string
str,
string
str2)
{
return
str
+ str2;
}
前台<JQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
type:
"Post"
,
url:
"data.aspx/GetStr"
,
//方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字
data:
"{'str':'我是','str2':'XXX'}"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
//返回的数据用data.d获取内容
alert(data.d);
},
error:
function
(err)
{
alert(err);
}
});
//禁用按钮的提交
return
false
;
});
});
3、返回数组方法的调用
后台<C#>:
using
System.Web.Script.Services;
[WebMethod]
public
static
List<
string
>
GetArray()
{
List<
string
>
li =
new
List<
string
>();
for
(
int
i
= 0; i < 10; i++)
li.Add(i
+
""
);
return
li;
}
前台<JQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
type:
"Post"
,
url:
"data.aspx/GetArray"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
//插入前先清空ul
$(
"#list"
).html(
""
);
//递归获取数据
$(data.d).each(
function
()
{
//插入结果到li里面
$(
"#list"
).append(
"<li>"
+
this
+
"</li>"
);
});
alert(data.d);
},
error:
function
(err)
{
alert(err);
}
});
//禁用按钮的提交
return
false
;
});
});
///
<reference path=
"jquery-1.4.2-vsdoc.js"
/>
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
type:
"Post"
,
url:
"data.aspx/GetArray"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
//插入前先清空ul
$(
"#list"
).html(
""
);
//递归获取数据
$(data.d).each(
function
()
{
//插入结果到li里面
$(
"#list"
).append(
"<li>"
+
this
+
"</li>"
);
});
alert(data.d);
},
error:
function
(err)
{
alert(err);
}
});
//禁用按钮的提交
return
false
;
});
});
4、返回Hashtable方法的调用
后台<C#>:
using
System.Web.Script.Services;
using
System.Collections;
[WebMethod]
public
static
Hashtable
GetHash(
string
key,
string
value)
{
Hashtable
hs =
new
Hashtable();
hs.Add(
"www"
,
"yahooooooo"
);
hs.Add(key,
value);
return
hs;
}
前台<JQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
type:
"Post"
,
url:
"data.aspx/GetHash"
,
//记得加双引号
T_T
data:
"{
'key': 'haha', 'value': '哈哈!' }"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
alert(
"key:
haha ==> "
+data.d[
"haha"
]+
"\n
key: www ==> "
+data.d[
"www"
]);
},
error:
function
(err)
{
alert(err
+
"err"
);
}
});
//禁用按钮的提交
return
false
;
});
});
5、操作xml
XMLtest.xml:
view
plaincopy to clipboardprint?
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
data
>
<
item
>
<
id
>1</
id
>
<
name
>qwe</
name
>
</
item
>
<
item
>
<
id
>2</
id
>
<
name
>asd</
name
>
</
item
>
</
data
>
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
data
>
<
item
>
<
id
>1</
id
>
<
name
>qwe</
name
>
</
item
>
<
item
>
<
id
>2</
id
>
<
name
>asd</
name
>
</
item
>
</
data
>
前台<JQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
url:
"XMLtest.xml"
,
dataType:
'xml'
,
//返回的类型为XML
,和前面的Json,不一样了
success:
function
(xml)
{
//清空list
$(
"#list"
).html(
""
);
//查找xml元素
$(xml).find(
"data>item"
).each(
function
()
{
$(
"#list"
).append(
"<li>id:"
+
$(
this
).find(
"id"
).text()
+
"</li>"
);
$(
"#list"
).append(
"<li>Name:"
+
$(
this
).find(
"name"
).text()
+
"</li>"
);
})
},
error:
function
(result,
status) {
//如果没有上面的捕获出错会执行这里的回调函数
alert(status);
}
});
//禁用按钮的提交
return
false
;
});
});