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 Math对象
Aug 13 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
谈谈JavaScript的New关键字
Aug 26 Javascript
JQuery Ajax WebService传递参数的简单实例
Nov 02 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
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
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue cli4.0项目引入typescript的方法
2020/07/17 Javascript
python实现求特征选择的信息增益
2018/12/18 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
python opencv实现gif图片分解的示例代码
2019/12/13 Python
如何在python中判断变量的类型
2020/07/29 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
Python collections.deque双边队列原理详解
2020/10/05 Python
Django websocket原理及功能实现代码
2020/11/14 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
C++如何引用一个已经定义过的全局变量
2014/08/25 面试题
教师个人自我评价范文
2014/04/13 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
好好学习保证书
2015/02/26 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Django操作cookie的实现
2021/05/26 Python
如何使用python包中的sched事件调度器
2022/04/30 Python