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实现的动态文字变换
Jul 28 Javascript
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
JS触摸与手势事件详解
May 09 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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 中文处理技巧
2010/04/25 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
js实现简单进度条效果
2020/03/25 Javascript
详细分析Node.js 模块系统
2020/06/28 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
Python元组及文件核心对象类型详解
2018/02/11 Python
Python登录系统界面实现详解
2019/06/25 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python 安装impala包步骤
2020/03/28 Python
python如何查看网页代码
2020/06/07 Python
2014年高三毕业生自我评价
2014/01/11 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
探亲假请假条
2014/04/11 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
2015七夕情人节宣传语
2015/07/14 职场文书
采购员工作总结范文
2015/08/12 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
英语教学课后反思
2016/02/15 职场文书
Golang bufio详细讲解
2022/04/21 Golang
配置nginx负载均衡
2022/05/06 Servers