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对象的动态选择及遍历对象
Mar 10 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vuex的module模块用法示例
Nov 12 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
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读取RSS(Feed)简单实例
2014/06/12 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
28个常用JavaScript方法集锦
2015/01/14 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
js实现仿qq消息的弹出窗效果
2016/01/06 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
JavaScript实现页面无操作倒计时退出
2016/10/22 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
linux下python抓屏实现方法
2015/05/22 Python
浅谈python正则的常用方法 覆盖范围70%以上
2018/03/14 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
Numpy之文件存取的示例代码
2018/08/03 Python
python and or用法详解
2019/06/26 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
python中property和setter装饰器用法
2019/12/19 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
html5使用canvas绘制太阳系效果
2014/12/15 HTML / CSS
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
药剂专业自荐书
2014/06/20 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
鉴史问廉观后感
2015/06/10 职场文书
暑假生活随笔
2015/08/15 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript