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 相关文章推荐
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jQuery中:not选择器用法实例
Dec 30 Javascript
js查找节点的方法小结
Jan 13 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
改造一台复古桌面收音机
2021/03/02 无线电
使用php来实现网络服务
2009/09/15 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
javascript实现的网站访问量统计代码
2015/12/20 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
详解python中requirements.txt的一切
2017/03/03 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
python绘制已知点的坐标的直线实例
2019/07/04 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
pycharm中导入模块错误时提示Try to run this command from the system terminal
2020/03/26 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
写clone()方法时,通常都有一行代码,是什么?
2012/10/31 面试题
法院干警四风问题自我剖析材料
2014/09/29 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
成品仓库管理员岗位职责
2015/04/09 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Python深度学习之Pytorch初步使用
2021/05/20 Python
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL