没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上 [WebMethod]) [WebMethod] public static string ABC(string ABC) { return ABC; } 好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回的数据有string、集合(List<>)、类. 但都返回Json格式(
资源推荐
资源详情
资源评论
详谈详谈 Jquery Ajax异步处理异步处理Json数据数据.
所谓的Ajax.这里我们讲二种方法
方法一:(微软有自带Ajax框架)
在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法
前加上 [WebMethod])
[WebMethod]
public static string ABC(string ABC)
{
return ABC;
}
好了,现在我们谈谈前台Js怎么处理后台返回的数据吧,可利用Jquery处理返回的纯html,json,Xml等数据.这里我们演示返回返回
的数据有string、集合(List<>)、类.
但都返回Json格式(Json轻量级比XML处理起来简单).看看前台是怎么解析这些数据的.
代码如下:
前台页面:
代码如下:
<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %>
<!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 runat=”server”>
<title>无标题页</title>
<style type=”text/css”>
.hover
{
cursor: pointer; /*小手*/
background: #ffc; /*背景*/
}
</style>
<script type=”text/javascript” src=”js/jquery-1.3.2-vsdoc2.js”></script>
<script type=”text/javascript”>
//无参数调用
$(document).ready(function() {
$(‘#btn1’).click(function() {
$.ajax({
type: “POST”, //访问WebService使用Post方式请求
contentType: “application/json”,
url: “Default2.aspx/HelloWorld”, //调用WebService的地址和方法名称组合 —- WsURL/方法名
data: “{}”, //这里是要传递的参数,格式为 data: “{paraName:paraValue}”,下面将会看到
dataType: ‘json’, //WebService 会返回Json类型
success: function(result) { //回调函数,result,返回值
alert(result.d);
}
});
});
});
//有参数调用
$(document).ready(function() {
$(“#btn2”).click(function() {
$.ajax({
type: “POST”,
contentType: “application/json”,
url: “Default2.aspx/GetWish”,
data: “{value1:’心想事成’,value2:’万事如意’,value3:’牛牛牛’,value4:2009}”,
dataType: ‘json’,
success: function(result) {
alert(result.d);
}
});
});
});
//返回集合(引用自网络,很说明问题)
$(document).ready(function() {
$(“#btn3”).click(function() {
$.ajax({
type: “POST”,
contentType: “application/json”,
url: “Default2.aspx/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: “Default2.aspx/GetClass”,
data: “{}”,
dataType: ‘json’,
success: function(result) {
$(result.d).each(function() {
//alert(this);
$(‘#dictionary’).append(this[‘ID’] + ” ” + this[‘Value’]);
//alert(result.d.join(” | “));
});
}
});
});
});
//Ajax 为用户提供反馈,他们两个方法可以添加给jQuery对象在Ajax前后回调
//但对与Ajax的监控,本身是全局性的
$(document).ready(function() {
$(‘#loading’).ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
});
// 鼠标移入移出效果,多个元素的时候,可以使用“,”隔开
$(document).ready(function() {
$(‘btn’).hover(function() {
$(this).addClass(‘hover’);
}, function() {
$(this).removeClass(‘hover’);
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<input type=”button” id=”btn1″ value=”HelloWorld”/>
<input type=”button” id=”btn2″ value=”传入参数”/>
<input type=”button” id=”btn3″ value=”返回集合”/>
<input type=”button” id=”btn4″ value=” 返回复合类型”/>
</div>
<div id=”dictionary”>dictionary
</div>
</form>
</body>
</html>
后台.cs文件
代码如下:
剩余6页未读,继续阅读
资源评论
weixin_38556189
- 粉丝: 8
- 资源: 921
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功