Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
作者:bea
一、WebService.asmx 处理业务数据,在GetWhether方法中产生天气情况数据,供JqueryRequest.aspx调用,代码如下: 代码如下: [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { public WebService () { //如果使用设计的组件,请取消注释以下行 //I
一、WebService.asmx
处理业务数据,在GetWhether方法中产生天气情况数据,供JqueryRequest.aspx调用,代码如下:
代码如下:
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string GetWhether(string cityId)
{
Random r = new Random();
int degree = r.Next(100);
string wInfo = string.Format("Today {0}'s temperature is {1} degrees", cityId, degree);
return wInfo;
}
}
二、AjaxRequest.aspx
通过点击按钮来请求WebService.asmx的GetWhether(string cityId)方法,获取天气数据。代码如下:
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="Text1" id="Text1"/><br />
<input type="text" name="Text2" id="Text2"/>
<br />
<input type="button" id="btn1" onclick="BtnCity_Click()"
style="width:55px; height:20px;" />
</div>
<div id="dd">
sd
</div>
<div>
<script type="text/javascript" language="javascript">
function BtnCity_Click() {
var city = $("#Text1").val();
$.ajax({
url: "WebService.asmx/GetWhether",
data: { cityId: city },
type: "post",
success: function(data, status) {
$("#dd").html("<h1>天气情况:" + data.childNodes[1].text + "</h1>");
}
});
}
</script>
</div>
</form>
</body>
</html>
有用 | 无用
处理业务数据,在GetWhether方法中产生天气情况数据,供JqueryRequest.aspx调用,代码如下:
代码如下:
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
//如果使用设计的组件,请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string GetWhether(string cityId)
{
Random r = new Random();
int degree = r.Next(100);
string wInfo = string.Format("Today {0}'s temperature is {1} degrees", cityId, degree);
return wInfo;
}
}
二、AjaxRequest.aspx
通过点击按钮来请求WebService.asmx的GetWhether(string cityId)方法,获取天气数据。代码如下:
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript" src="js/jquery-1.3.2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" name="Text1" id="Text1"/><br />
<input type="text" name="Text2" id="Text2"/>
<br />
<input type="button" id="btn1" onclick="BtnCity_Click()"
style="width:55px; height:20px;" />
</div>
<div id="dd">
sd
</div>
<div>
<script type="text/javascript" language="javascript">
function BtnCity_Click() {
var city = $("#Text1").val();
$.ajax({
url: "WebService.asmx/GetWhether",
data: { cityId: city },
type: "post",
success: function(data, status) {
$("#dd").html("<h1>天气情况:" + data.childNodes[1].text + "</h1>");
}
});
}
</script>
</div>
</form>
</body>
</html>
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript 验证日期的函数
- 12个非常有创意的JavaScript小游戏
- JQuery 插件模板 制作jquery插件的朋友可以参考下
- jquery 简单图片导航插件jquery.imgNav.js
- Array.prototype.slice.apply的使用方法
- javascript 打开页面window.location和window.open的区别
- input 输入框内的输入事件详细分析
- js replace() 文本替换你所不知的
- javascript 新闻标题静态分页代码 (无刷新)
- Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
- javascript中的undefined 与 null 的区别 补充篇
- javascript+iframe 实现无刷新载入整页的代码
- js select常用操作控制代码
- js实现的日期操作类DateTime函数代码
- js 翻转颜色实现代码
- javascript json2 使用方法
- jQuery 选择器理解
- jQuery 学习入门篇附实例代码
- Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用