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 相关文章推荐
setTimeout自动触发一个js的方法
Jan 15 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
高性能JavaScript 重排与重绘(2)
Aug 11 Javascript
分享五个有用的jquery小技巧
Oct 08 Javascript
JavaScript Ajax编程 应用篇
Jul 02 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 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的网址
2006/11/25 PHP
PHP 一个页面执行时间类代码
2010/03/05 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
jQuery学习笔记之jQuery的DOM操作
2010/12/22 Javascript
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
Python实现读取json文件到excel表
2017/11/18 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python def 定义函数,调用函数方式
2020/06/02 Python
英国网上花店:Bunches
2016/11/29 全球购物
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
心灵捕手观后感
2015/06/02 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书