利用JQuery直接调用asp.net后台的简单方法
2024-08-26 22:32:50
利用JQuery的$.ajax()可以很方便的调用asp.net的后台方法。
[WebMethod] 命名空间
1、无参数的方法调用, 注意:1.方法一定要静态方法,而且要有[WebMethod]的声明
后台<C#>:
using
System.Web.Script.Services;
[WebMethod]
public
static
string
SayHello()
{
return
"Hello
Ajax!";
}
前台<jQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
//要用post方式
type:
"Post"
,
//方法所在页面和方法名
url:
"data.aspx/SayHello"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
//返回的数据用data.d获取内容
alert(data.d);
},
error:
function
(err)
{
alert(err);
}
});
//禁用按钮的提交
return
false
;
});
});
2、带参数的方法调用
后台<C#>:
using
System.Web.Script.Services;
[WebMethod]
public
static
string
GetStr(
string
str,
string
str2)
{
return
str
+ str2;
}
前台<JQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
type:
"Post"
,
url:
"data.aspx/GetStr"
,
//方法传参的写法一定要对,str为形参的名字,str2为第二个形参的名字
data:
"{'str':'我是','str2':'XXX'}"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
//返回的数据用data.d获取内容
alert(data.d);
},
error:
function
(err)
{
alert(err);
}
});
//禁用按钮的提交
return
false
;
});
});
3、返回数组方法的调用
后台<C#>:
using
System.Web.Script.Services;
[WebMethod]
public
static
List<
string
>
GetArray()
{
List<
string
>
li =
new
List<
string
>();
for
(
int
i
= 0; i < 10; i++)
li.Add(i
+
""
);
return
li;
}
前台<JQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
type:
"Post"
,
url:
"data.aspx/GetArray"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
//插入前先清空ul
$(
"#list"
).html(
""
);
//递归获取数据
$(data.d).each(
function
()
{
//插入结果到li里面
$(
"#list"
).append(
"<li>"
+
this
+
"</li>"
);
});
alert(data.d);
},
error:
function
(err)
{
alert(err);
}
});
//禁用按钮的提交
return
false
;
});
});
///
<reference path=
"jquery-1.4.2-vsdoc.js"
/>
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
type:
"Post"
,
url:
"data.aspx/GetArray"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
//插入前先清空ul
$(
"#list"
).html(
""
);
//递归获取数据
$(data.d).each(
function
()
{
//插入结果到li里面
$(
"#list"
).append(
"<li>"
+
this
+
"</li>"
);
});
alert(data.d);
},
error:
function
(err)
{
alert(err);
}
});
//禁用按钮的提交
return
false
;
});
});
4、返回Hashtable方法的调用
后台<C#>:
using
System.Web.Script.Services;
using
System.Collections;
[WebMethod]
public
static
Hashtable
GetHash(
string
key,
string
value)
{
Hashtable
hs =
new
Hashtable();
hs.Add(
"www"
,
"yahooooooo"
);
hs.Add(key,
value);
return
hs;
}
前台<JQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
type:
"Post"
,
url:
"data.aspx/GetHash"
,
//记得加双引号
T_T
data:
"{
'key': 'haha', 'value': '哈哈!' }"
,
contentType:
"application/json;
charset=utf-8"
,
dataType:
"json"
,
success:
function
(data)
{
alert(
"key:
haha ==> "
+data.d[
"haha"
]+
"\n
key: www ==> "
+data.d[
"www"
]);
},
error:
function
(err)
{
alert(err
+
"err"
);
}
});
//禁用按钮的提交
return
false
;
});
});
5、操作xml
XMLtest.xml:
view
plaincopy to clipboardprint?
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
data
>
<
item
>
<
id
>1</
id
>
<
name
>qwe</
name
>
</
item
>
<
item
>
<
id
>2</
id
>
<
name
>asd</
name
>
</
item
>
</
data
>
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
data
>
<
item
>
<
id
>1</
id
>
<
name
>qwe</
name
>
</
item
>
<
item
>
<
id
>2</
id
>
<
name
>asd</
name
>
</
item
>
</
data
>
前台<JQuery>:
$(
function
()
{
$(
"#btnOK"
).click(
function
()
{
$.ajax({
url:
"XMLtest.xml"
,
dataType:
'xml'
,
//返回的类型为XML
,和前面的Json,不一样了
success:
function
(xml)
{
//清空list
$(
"#list"
).html(
""
);
//查找xml元素
$(xml).find(
"data>item"
).each(
function
()
{
$(
"#list"
).append(
"<li>id:"
+
$(
this
).find(
"id"
).text()
+
"</li>"
);
$(
"#list"
).append(
"<li>Name:"
+
$(
this
).find(
"name"
).text()
+
"</li>"
);
})
},
error:
function
(result,
status) {
//如果没有上面的捕获出错会执行这里的回调函数
alert(status);
}
});
//禁用按钮的提交
return
false
;
});
});
最新文章
- Volley(一 )—— 框架简介
- VIJOS-P1340 拯救ice-cream(广搜+优先级队列)
- MySQL、SQLServer2000(及SQLServer2005)和ORCALE三种数据库实现分页查询的方法
- android xml文件中出现如下提醒:This tag and its children can be replaced by one <;TextView/>; and a compound drawable
- DFB系列 之 Flip()更新buffe
- stl 和并查集应用
- jenkins学习之自动打包构建nodejs应用
- 【新特性】JDK10
- ADO.Net中DataSet的应用
- 图解HTTP阅读笔记(1)-网络基础TCP/IP
- 【Jmeter自学】Jmeter实战-web程序(六)
- OCP 062考试题库2019年新出现的考题-17
- poj-1459-最大流dinic+链式前向星-isap+bfs+stack
- [调试][程序打印]当printf不能用时,使用C++的不定参数来搞定OutputDebugString打印
- English trip -- VC(情景课)5 D
- 转 Fiddler导出jmeter脚本
- 解决LLDB模式下出现message sent to deallocated instance错误
- vue 的调试工具
- [LeetCode系列] 二叉树最大深度求解问题(C++递归解法)
- oracle整理
热门文章
- [k8s]容器化node-expolore(9100)+cadvisor(8080)+prometheus(9090) metric搜集,grafana展示
- [k8s]kubeadm k8s免费实验平台labs.play-with-k8s.com,k8s在线测试
- iOS: 让键盘消失的的4种方法
- python(25):Unicode 转成中文
- hdoj2037 今年暑假不AC
- 第九章 搭建Hadoop 2.2.0版本HDFS的HA配置
- Object.defineProperty()属性设置介绍
- SVN开启端口监听,并设置开机启动
- LeetCode 新题: Find Minimum in Rotated Sorted Array 解题报告-二分法模板解法
- 使用conda 对gcc进行升级 (sonicparanoid)