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的面向对象(二)
Nov 09 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
jquery将json转为数据字典的实例代码
Oct 11 jQuery
vue-quill-editor的使用及个性化定制操作
Aug 04 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
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
js实现数字滚动特效
2019/12/16 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python测试网络连通性示例【基于ping】
2018/08/03 Python
python版大富翁源代码分享
2018/11/19 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
基于python使用tibco ems代码实例
2019/12/20 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
如何写python的配置文件
2020/06/07 Python
django form和field具体方法和属性说明
2020/07/09 Python
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
项目计划书范文
2014/01/09 职场文书
企业总经理职责
2014/02/02 职场文书
新闻发布会活动策划方案
2014/09/15 职场文书
实习单位推荐信
2015/03/27 职场文书
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python