Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据


Posted in Javascript onMarch 16, 2010

一、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>
Javascript 相关文章推荐
Javascript 面向对象特性
Dec 28 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
AngularJS ng-mousedown 指令
Aug 02 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
详解Vue router路由
Nov 20 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
javascript 二维数组的实现与应用
Mar 16 #Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 #Javascript
jQuery MD5加密实现代码
Mar 15 #Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 #Javascript
javascript实现的在当前窗口中漂浮框的代码
Mar 15 #Javascript
javascript 用记忆函数快速计算递归函数
Mar 15 #Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 #Javascript
You might like
小偷PHP+Html+缓存
2006/11/25 PHP
PHP 数据库树的遍历方法
2009/02/06 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
ThinkPHP调用百度翻译类实现在线翻译
2014/06/26 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
php fread读取文件注意事项
2016/09/24 PHP
PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
2017/02/04 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
如何在MVC应用程序中使用Jquery
2014/11/17 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
详解用node-images 打造简易图片服务器
2017/05/08 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
2018/09/13 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Python实现的质因式分解算法示例
2018/05/03 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
django的ORM模型的实现原理
2019/03/04 Python
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
店长岗位职责
2013/11/21 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书