zl程序教程

您现在的位置是:首页 >  后端

当前栏目

jQueryAjax方法调用Asp.NetWebService的详细实例代码

实例ASP方法代码 详细 调用 JqueryAJAX
2023-06-13 09:14:28 时间
ws.aspx代码
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headid="Head1"runat="server">
<title></title>
<scriptsrc="jquery.js"type="text/javascript"></script>
<styletype="text/css">
.hover
{
cursor:pointer;/*小手*/
background:#ffc;/*背景*/
}
.button
{
width:150px;
float:left;
text-align:center;
margin:10px;
padding:10px;
border:1pxsolid#888;
}
#dictionary
{
text-align:center;
font-size:18px;
clear:both;
border-top:3pxsolid#888;
}
#loading
{
border:1px#000solid;
background-color:#eee;
padding:20px;
margin:100px00200px;
position:absolute;
display:none;
}
#switcher
{
}
</style>
<scripttype="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("|"));
});
}
});
});
});
==============
varaArray=[“sdf”,”dasd”,”dsa”];//数组$.each(aArray,function(iNum,value){document.write(“序号:”+iNum+”值:”+value);});varoObj={one:1,two:2,three:3};$.each(aArray,function(property,value){document.write(“属性:”+property+”值:”+value);});
==============================================
//返回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>
<formid="form1"runat="server">
<divid="switcher">
<h2>
jQuery的WebServices调用</h2>
<divclass="button"id="btn1">
HelloWorld</div>
<divclass="button"id="btn2">
传入参数</div>
<divclass="button"id="btn3">
返回集合</div>
<divclass="button"id="btn4">
返回复合类型</div>
<divclass="button"id="btn5">
返回DataSet(XML)</div>
</div>
<divid="loading">
服务器处理中,请稍后。
</div>
<divid="dictionary">
</div>
</form>
</body>
</html>

WebService1.asmx.cs
复制代码代码如下:

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Services;
usingSystem.Data;
namespacejQuery.Learning
{
///<summary>
///WebService1的摘要说明
///</summary>
[WebService(Namespace="http://tempuri.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
//若要允许使用ASP.NETAJAX从脚本中调用此Web服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
publicclassWebService1:System.Web.Services.WebService
{
///<summary>
///无参数
///</summary>
///<returns></returns>
[WebMethod]
publicstringHelloWorld()
{
return"HelloWorld";
}
///<summary>
///带参数
///</summary>
///<paramname="value1"></param>
///<paramname="value2"></param>
///<paramname="value3"></param>
///<paramname="value4"></param>
///<returns></returns>
[WebMethod]
publicstringGetWish(stringvalue1,stringvalue2,stringvalue3,intvalue4)
{
returnstring.Format("祝您在{3}年里{0}、{1}、{2}",value1,value2,value3,value4);
}
///<summary>
///返回集合
///</summary>
///<paramname="i"></param>
///<returns></returns>
[WebMethod]
publicList<int>GetArray(inti)
{
List<int>list=newList<int>();
while(i>=0)
{
list.Add(i--);
}
returnlist;
}
///<summary>
///返回一个复合类型
///</summary>
///<returns></returns>
[WebMethod]
publicClass1GetClass()
{
returnnewClass1{ID="1",Value="牛年大吉"};
}
///<summary>
///返回XML
///</summary>
///<returns></returns>
[WebMethod]
publicDataSetGetDataSet()
{
DataSetds=newDataSet();
DataTabledt=newDataTable();
dt.Columns.Add("ID",Type.GetType("System.String"));
dt.Columns.Add("Value",Type.GetType("System.String"));
DataRowdr=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);
returnds;
}
}
//自定义的类,只有两个属性
publicclassClass1
{
publicstringID{get;set;}
publicstringValue{get;set;}
}
}