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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
AngularJS实现表单验证
Jan 28 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
Dec 18 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
vue element table中自定义一些input的验证操作
Jul 18 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
php session_decode函数用法讲解
2019/05/26 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
ajax与302响应代码测试
2013/10/23 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
js单词形式的运算符
2014/05/06 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
JS之相等操作符详解
2016/09/13 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
Python读取YAML文件过程详解
2019/12/30 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
平安家庭示范户事迹
2014/06/02 职场文书
学校安全责任书范本
2014/07/23 职场文书
2015年副班长工作总结
2015/05/15 职场文书
个人借条范本
2015/05/25 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
如何将numpy二维数组中的np.nan值替换为指定的值
2021/05/14 Python