<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head id=
"Head1"
runat=
"server"
>
<title></title>
<script src=
"jquery.js"
type=
"text/javascript"
></script>
<style type=
"text/css"
>
.hover
{
cursor: pointer;
background: #ffc;
}
.button
{
width: 150px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
border: 1px solid #888;
}
#dictionary
{
text-align: center;
font-size: 18px;
clear: both;
border-top: 3px solid #888;
}
#loading
{
border: 1px #000 solid;
background-color: #eee;
padding: 20px;
margin: 100px 0 0 200px;
position: absolute;
display: none;
}
#switcher
{
}
</style>
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$('#btn1').click(
function
() {
$.ajax({
type:
"POST"
,
contentType:
"application/json"
,
url:
"WebService1.asmx/HelloWorld"
,
data:
"{}"
,
dataType: 'json',
success:
function
(result) {
$('#dictionary').append(result.d);
}
});
});
});
$(document).ready(
function
() {
$(
"#btn2"
).click(
function
() {
$.ajax({
type:
"POST"
,
contentType:
"application/json"
,
url:
"WebService1.asmx/GetWish"
,
data:
"{value1:'心想事成',value2:'万事如意',value3:'牛牛牛',value4:2009}"
,
dataType: 'json',
success:
function
(result) {
$('#dictionary').append(result.d);
}
});
});
});
$(document).ready(
function
() {
$(
"#btn3"
).click(
function
() {
$.ajax({
type:
"POST"
,
contentType:
"application/json"
,
url:
"WebService1.asmx/GetArray"
,
data:
"{i:10}"
,
dataType: 'json',
success:
function
(result) {
$(result.d).each(
function
() {
$('#dictionary').append(this.toString() +
" "
);
});
}
});
});
});
$(document).ready(
function
() {
$('#btn4').click(
function
() {
$.ajax({
type:
"POST"
,
contentType:
"application/json"
,
url:
"WebService1.asmx/GetClass"
,
data:
"{}"
,
dataType: 'json',
success:
function
(result) {
$(result.d).each(
function
() {
$('#dictionary').append(this['ID'] +
" "
+ this['Value']);
});
}
});
});
});
==============
var
aArray = [“sdf”,”dasd”,”dsa”];
==============================================
$(document).ready(
function
() {
$('#btn5').click(
function
() {
$.ajax({
type:
"POST"
,
url:
"WebService1.asmx/GetDataSet"
,
data:
"{}"
,
dataType: 'xml',
success:
function
(result) {
try
{
$(result).find(
"Table1"
).each(
function
() {
$('#dictionary').append($(this).find(
"ID"
).text() +
" "
+ $(this).find(
"Value"
).text());
});
}
catch
(e) {
alert(e);
return
;
}
},
error:
function
(result, status) {
if
(status == 'error') {
alert(status);
}
}
});
});
});
$(document).ready(
function
() {
$('#loading').ajaxStart(
function
() {
$(this).show();
}).ajaxStop(
function
() {
$(this).hide();
});
});
$(document).ready(
function
() {
$('div.button').hover(
function
() {
$(this).addClass('hover');
},
function
() {
$(this).removeClass('hover');
});
});
</script>
</head>
<body>
<form id=
"form1"
runat=
"server"
>
<div id=
"switcher"
>
<h2>
jQuery 的WebServices 调用</h2>
<div
class
=
"button"
id=
"btn1"
>
HelloWorld</div>
<div
class
=
"button"
id=
"btn2"
>
传入参数</div>
<div
class
=
"button"
id=
"btn3"
>
返回集合</div>
<div
class
=
"button"
id=
"btn4"
>
返回复合类型</div>
<div
class
=
"button"
id=
"btn5"
>
返回DataSet(XML)</div>
</div>
<div id=
"loading"
>
服务器处理中,请稍后。
</div>
<div id=
"dictionary"
>
</div>
</form>
</body>
</html>