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 操作select下拉列表框的一点小经验
Mar 20 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
微信小程序 弹幕功能简单实例
Feb 14 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
js实现无缝滚动双图切换效果
Jul 09 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
php去掉字符串的最后一个字符附substr()的用法
2011/03/23 PHP
PHP二维数组的去重问题解析
2011/07/17 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php截取中文字符串函数实例
2015/02/23 PHP
PHP分享图片的生成方法
2018/04/25 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
分享15个大家都熟知的jquery小技巧
2015/12/02 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
Vue不能观察到数组length的变化
2018/06/08 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python从MP3文件获取id3的方法
2015/06/15 Python
Python 中的range(),以及列表切片方法
2018/07/02 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
Python批量启动多线程代码实例
2020/02/18 Python
PyCharm 无法 import pandas 程序卡住的解决方式
2020/03/09 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
行政管理专业求职信
2014/07/06 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
创业计划书之宠物店
2019/09/19 职场文书