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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
js和jquery设置disabled属性为true使按钮失效
Aug 07 Javascript
javascript框架设计之类工厂
Jun 23 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
JS面向对象的程序设计相关知识小结
May 26 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
小程序云开发之用户注册登录
May 18 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
开发一个封装iframe的vue组件
Mar 29 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
模拟xcopy的函数
2006/10/09 PHP
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
2012/05/23 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
编辑求职信样本
2013/12/16 职场文书
企业车辆管理制度
2014/01/24 职场文书
硕士生工作推荐信
2014/03/07 职场文书
教师自查自纠工作情况报告
2014/10/29 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Nginx反向代理、重定向
2022/04/13 Servers
Python如何使用循环结构和分支结构
2022/04/13 Python