您的位置:知识库 » Web前端

jQuery Ajax 方法调用 Asp.Net WebService 的详细例子

作者: fcsh820  来源: csdn  发布时间: 2009-07-12 22:32  阅读: 3677 次  推荐: 2   原文链接   [收藏]  

我在这里将jQuery Ajax 调用Aspx.Net WebService 的几个常用的方法做了一个整理,提供给正在找这方面内容的博友,希望能给学习jQuery的朋友一点帮助,可以直接复制代码运行

ws.aspx 代码

 

<!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", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: "WebService1.asmx/HelloWorld", //调用WebService的地址和方法名称组合 ---- WsURL/方法名
data: "{}", //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到
dataType: 'json',
success:
function(result) { //回调函数,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() {
//alert(this);
$('#dictionary').append(this.toString() + " ");
//alert(result.d.join(" | "));
});
}
});
});
});


//返回复合类型
$(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() {
//alert(this);
$('#dictionary').append(this['ID'] + " " + this['Value']);
//alert(result.d.join(" | "));
});

}
});
});
});

//返回DataSet(XML)
$(document).ready(function() {
$(
'#btn5').click(function() {
$.ajax({
type:
"POST",
url:
"WebService1.asmx/GetDataSet",
data:
"{}",
dataType:
'xml', //返回的类型为XML ,和前面的Json,不一样了
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);
}
}
});
});
});

//Ajax 为用户提供反馈,利用ajaxStart和ajaxStop 方法,演示ajax跟踪相关事件的回调,他们两个方法可以添加给jQuery对象在Ajax前后回调
//但对与Ajax的监控,本身是全局性的
$(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>

WebService1.asmx.cs

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;

namespace jQuery.Learning
{
/// <summary>
/// WebService1 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(
false)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
/// <summary>
/// 无参数
/// </summary>
/// <returns></returns>
[WebMethod]
public string HelloWorld()
{
return "Hello World ";
}

/// <summary>
/// 带参数
/// </summary>
/// <param name="value1"></param>
/// <param name="value2"></param>
/// <param name="value3"></param>
/// <param name="value4"></param>
/// <returns></returns>
[WebMethod]
public string GetWish(string value1, string value2, string value3, int value4)
{
return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4);
}

/// <summary>
/// 返回集合
/// </summary>
/// <param name="i"></param>
/// <returns></returns>
[WebMethod]
public List<int> GetArray(int i)
{
List
<int> list = new List<int>();

while (i >= 0)
{
list.Add(i
--);
}

return list;
}

/// <summary>
/// 返回一个复合类型
/// </summary>
/// <returns></returns>
[WebMethod]
public Class1 GetClass()
{
return new Class1 { ID = "1", Value = "牛年大吉" };
}


/// <summary>
/// 返回XML
/// </summary>
/// <returns></returns>
[WebMethod]
public DataSet GetDataSet()
{
DataSet ds
= new DataSet();
DataTable dt
= new DataTable();
dt.Columns.Add(
"ID", Type.GetType("System.String"));
dt.Columns.Add(
"Value", Type.GetType("System.String"));
DataRow dr
= dt.NewRow();
dr[
"ID"] = "1";
dr[
"Value"] = "新年快乐";
dt.Rows.Add(dr);
dr
= dt.NewRow();
dr[
"ID"] = "2";
dr[
"Value"] = "万事如意";
dt.Rows.Add(dr);
ds.Tables.Add(dt);
return ds;
}


}
//自定义的类,只有两个属性
public class Class1
{
public string ID { get; set; }
public string Value { get; set; }
}
}
2
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻