Jquery + Ajax调用webService实例代码(asp.net)

 更新时间:2010年08月27日 19:25:02   作者:   我要评论
Jquery + Ajax调用webService实例代码,需要的朋友可以参考下。
webService中要实现ajax调用,则要加这句代码:
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务,请取消对下行的注释。
[System.Web.Script.Services.ScriptService]
代码下载 /201008/yuanma/WebService2.rar
复制代码 代码如下:

//无参数调用
$(document).ready(function() {
$('#btn1').click(function() {
$.ajax({
type: "POST", //访问WebService使用Post方式请求
contentType: "application/json", //WebService 会返回Json类型
url: WebServiceURL + "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: WebServiceURL + "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: WebServiceURL + "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: WebServiceURL + "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: WebServiceURL + "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();
});
});

相关文章

  • jQuery webuploader分片上传大文件

    jQuery webuploader分片上传大文件

    这篇文章主要为大家详细介绍了jQuery webuploader分片上传大文件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JQuery 选择器、DOM节点操作练习实例

    JQuery 选择器、DOM节点操作练习实例

    下面小编就为大家带来一篇JQuery 选择器、DOM节点操作练习实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • jquery实现页面虚拟键盘特效

    jquery实现页面虚拟键盘特效

    本文实例讲述了jquery比较简洁的软键盘特效实现方法。而且带有数字与字母切换功能,效果非常不错,分享给大家供大家参考。
    2015-08-08
  • ztree实现权限横向显示功能

    ztree实现权限横向显示功能

    最近在做权限功能的时候,采用的ztree实现的,但是产品要求最后一层的权限节点要横向显示。下面小编把基于ztree实现权限横向显示功能的实现思路分享给大家,供大家参考
    2017-05-05
  • jQuery使用hide方法隐藏页面上指定元素的方法

    jQuery使用hide方法隐藏页面上指定元素的方法

    这篇文章主要介绍了jQuery使用hide方法隐藏页面上指定元素的方法,涉及jQuery使用hide隐藏元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • jquery中交替点击事件的实现代码

    jquery中交替点击事件的实现代码

    这篇文章主要介绍了jquery中交替点击事件的实现代码,需要的朋友可以参考下
    2014-02-02
  • Treegrid的动态加载实例代码

    Treegrid的动态加载实例代码

    这篇文章主要介绍了Treegrid的动态加载实例代码的相关资料,需要的朋友可以参考下
    2016-04-04
  • jQuery弹出层插件Lightbox_me使用指南

    jQuery弹出层插件Lightbox_me使用指南

    在使用discuzx中有一个Message以及Dialog方法来显示信息对话框。今天写项目的时候,需要一个信息对话框,所以就着手利用lightbox_me插件来写一个做备用。
    2015-04-04
  • jquery实现具有收缩功能的垂直导航菜单

    jquery实现具有收缩功能的垂直导航菜单

    这篇文章主要介绍了jquery实现具有收缩功能的垂直导航菜单点击可以展开折叠的导航菜单,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • jQuery多文件异步上传带进度条实例代码

    jQuery多文件异步上传带进度条实例代码

    这篇文章主要介绍了jQuery多文件异步上传带进度条实例代码,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08

最新评论