发布于 2017-04-19 10:05:09 | 23 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架,核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布,吸引了来自世界各地的众多JavaScript高手加入,由Dave Methvin率领团队进行开发。


jQuery调用WebService的实现代码,需要的朋友可以参考下。
一个例子说尽:
1、.aspx中:
 
<div class="button" id="btn1"><a href="#">HelloWorld</div> 
<div class="button" id="btn2"><a href="#">传入参数</a></div> 
<div class="button" id="btn3"><a href="#">返回集合</a></div> 
<div class="button" id="btn4"><a href="#">返回复合类型</a></div> 
<div class="button" id="btn5"><a href="#">返回DataSet(XML)</a></div> 
</div><div id="loading">服务器处理中,请稍后</div> 
<div id="dictionary"></div> 

2、WebService中:
 
[WebService(Namespace = "http://tempuri.org/")] 
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
//若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。 
[System.Web.Script.Services.ScriptService] //如果要用jquery调用WebService则取消前面的注释 
public class WebService : System.Web.Services.WebService 
{ 
public WebService() 
{ 
//如果使用设计的组件,请取消注释以下行 
//InitializeComponent(); 
} 
[WebMethod] 
public string HelloWorld() 
{ 
return "Hello World"; 
} 
[WebMethod] 
public string GetWish(string value1, string value2, string value3, int value4) 
{ 
return string.Format("祝您在{3}年里 {0}、{1}、{2}", value1, value2, value3, value4); 
} 
[WebMethod] 
public List<int> GetArray(int i) 
{ 
List<int> list = new List<int>(); 
while (i >= 0) 
{ 
list.Add(i--); 
} 
return list; 
} 
[WebMethod] 
public Class1 GetClass() 
{ 
Class1 a = new Class1(); 
a.ID = "1"; 
a.Value = "牛年大吉"; 
return a; 
} 
[WebMethod] 
public DataSet GetDataSet() 
{ 
DataSet ds = new DataSet(); 
DataTable dt = new DataTable("Table1"); 
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; } 
} 

3、JS中:
 
<script language="javascript" type="text/javascript"> 
//无参数 
$(function() { 
$("#btn1").click(function() { 
$.ajax({ 
type: "POST", //访问webservice使用POST方式请求 
contentType: "application/json;utf-8", //WebService会返回Json类型 
url: "WebService.asmx/HelloWorld", //调用WebService方法 
data: "{}", //要传递的参数,没有传参时,也一定要写上 
dataType: "json", 
success: function(result) { 
result =result.d;//返回d后面的json内容 
$("#dictionary").append(result); 
} 
}); 
}); 
}); 
//有参数 
$(function() { 
$("#btn2").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json;utf-8", 
url: "WebService.asmx/GetWish", 
data: "{value1:'万事如意',value2:'心想事成',value3:'财运滚滚',value4:2009}", 
dataType: "json", 
success: function(result) { 
result =result.d; 
$("#dictionary").html(result); 
} 
}); 
}); 
}); 
//返回集合 
$(function() { 
$("#btn3").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json;utf-8", 
url: "WebService.asmx/GetArray", 
data: "{i:10}", 
dataType: "json", 
success: function(result) { 
result =result.d; 
$(result).each(function() { 
$("#dictionary").append(this.toString() + " "); 
}); 
} 
}); 
}); 
}); 
//返回实体 
$(function() { 
$("#btn4").click(function() { 
$.ajax({ 
type: "POST", 
contentType: "application/json;utf-8", 
url: "WebService.asmx/GetClass", 
data: "{}", 
dataType: 'json', 
success: function(result) { 
result =result.d; 
$("#dictionary").append(result.ID + " " + result.Value); 
} 
}); 
}); 
}); 
//返回DataSet(XML) 
$(document).ready(function() { 
$('#btn5').click(function() { 
$.ajax({ 
type: "POST", 
url: "WebService.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> 

4、效果


相关阅读 :
jQuery调用WebService的实现代码
用JQuery调用Session的实现代码
Jquery ajax传递复杂参数给WebService的实现代码
使用jQuery操作Cookies的实现代码
jquery刷新页面的实现代码(局部及全页面刷新)
jquery构造器的实现代码小结
jQuery 操作option的实现代码
jquery调用asp.net 页面后台的实现代码
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
jQuery调用Webservice传递json数组的方法
jquery 获取select数组与name数组长度的实现代码
Jquery ajax请求导出Excel表格的实现代码
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务