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 相关文章推荐
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
原生JavaScript实现remove()和recover()功能示例
Jul 24 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
原生小程序封装跑马灯效果
Oct 21 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
php4的session功能评述(一)
2006/10/09 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
javascript IFrame 强制刷新代码
2009/07/23 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
浅析python的Lambda表达式
2019/02/27 Python
python实现视频分帧效果
2019/05/31 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Python实现SMTP邮件发送
2020/06/16 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
Python: glob匹配文件的操作
2020/12/11 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
柏林通行证:Berlin Pass
2018/04/11 全球购物
幼儿教师思想汇报
2014/01/10 职场文书
支部鉴定材料
2014/06/02 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书