多种方式实现JS调用后台方法进行数据交互


Posted in Javascript onAugust 20, 2013

项目开发过程中很多地方都需要前端和后台的数据交互,几种典型常用的方法如利用控件的AutopostBack属性、Button提交表单等等。但这些都是有条件的,AutoPostBack具有实时性但会刷新页面,Button提交表单不能实现数据交互的实时性。当然说到前台与后台的数据交互更不能漏掉ajax,ajax实现前台与后台数据的异步交互,并且保证实时的、局部刷新。但有些数据不需要异步交互,例如当交互的数据是下一步执行的条件时,就必须要等到数据前台与后台数据交互完成后才能继续执行程序。所以对于掌握js与后台数据交互的方法还是很有必要的。

方法一

后台方法:

<SPAN style="COLOR: #ff0000">// 需要标识为WebMethod</SPAN> 
[System.Web.Services.WebMethod] 
<SPAN style="COLOR: #ff0000">// 注意,要让前台调用的方法,一定要是public和static的</SPAN> 
public static string Say(string name) 
{ 
string result = "Hello:" + name; 
return result; 
}

前台js:
<script type="text/javascript"> 
function btnClick(){ 
PageMethods.Say("you",funReady,funError);<SPAN style="COLOR: #ff6666">//注意js中调用后台方法的方式</SPAN> 
} 
<SPAN style="COLOR: #ff0000">//回调函数, result 就是后台方法返回的数据</SPAN> 
function funReady(result){ 
alert(result); 
} 
<SPAN style="COLOR: #ff0000">//错误处理函数,err 就是后台方法返回的错误信息</SPAN> 
function funError(err){ 
alert("Error:" + err._message ); 
} 
</script> 
<asp:ScriptManagerID="ScriptManager1" runat="server"EnablePageMethods="true" /> 
<inputtype="button" onclick="btnClick()" value="test"/>

方法二

后台方法:

protected string Say(string strCC) 
{ 
strCC = "你好!" + strCC; 
return strCC; 
}

前台js:
function Show() 
{ 
var v = "中国"; 
var s = '<%=Say("'+v+'") %>'; // 你好!“+V+” 
alert(s); 
}<P style="MARGIN: 0in; FONT-FAMILY: Arial; COLOR: #666666; FONT-SIZE: 9pt"><input type="button" onclick="Show()" value="提交" /></P>

方法三

后台方法:

<SPAN style="COLOR: #666666">// 需要标识为WebMethod 
[System.Web.Services.WebMethod] 
// </SPAN><SPAN style="COLOR: #ff0000">注意,要让前台调用的方法,一定要是public和static的</SPAN><SPAN style="COLOR: #666666"> 
public static string Say(string name) 
{ 
string result = "Hello:" + name; 
return result; 
} 
</SPAN>

前台js:
<SPAN style="COLOR: #666666"><script type="text/javascript"> 
function btnClick(){ 
// </SPAN><SPAN style="COLOR: #ff0000">调用页面后台方法,前面跟方法所需的参数,接着是方法回调成功时要执行的js函数,最后一个是方法回调失败时要执行的js函数</SPAN><SPAN style="COLOR: #666666"> 
WebSerCustomer.Say("you",function(ress){//ress就是后台方法返回的数据,Say是webservice WebSerCustomer.axms页面上的方法 
alert(ress) 
}); 
} 
</script> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
<Services><asp:ServiceReference Path="~/WebSerCustomer.asmx" /></Services>//WebSerCustomer.asmx后台webservice类的页名称 
</asp:ScriptManager> <input type="button" onclick="btnClick()" value="test" /></SPAN>

总结
对于方法一和方法三来说,标识System.web.Services.webmethod可以声明一个方法可以通过客户端js函数来调用,并且后台方法必须声明为public和static,正是由于要将方法声明为static,使得这两种方法都有局限性,即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法,后台方法中是不能访问非静态成员变量的。

对于方法二来说,虽然后台方法没有任何限制,但是前台调用的时候由于<%=%>是只读的,前台向后台传的参数实际上是不存在的,即从后台中拿不到。所以方法二适合于调用后台方法经过处理并返回给客户端使用,不适合于将数据传到后台供后台使用。

Javascript 相关文章推荐
jQuery EasyUI中对表格进行编辑的实现代码
Jun 10 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
详解Node.js模板引擎Jade入门
Jan 19 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
js获取指定日期前后的日期代码
Aug 20 #Javascript
js 自定义个性下拉选择框示例
Aug 20 #Javascript
JavaScript打印iframe内容示例代码
Aug 20 #Javascript
JQuery之focus函数使用介绍
Aug 20 #Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 #Javascript
网页中可关闭的漂浮窗口实现可自行调节
Aug 20 #Javascript
js判断选择的时间是否大于今天的代码
Aug 20 #Javascript
You might like
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python接口自动化框架实战
2020/12/23 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
舞蹈教育学专业推荐信
2013/11/27 职场文书
主题教育活动总结
2014/05/05 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
驳回起诉裁定书
2015/05/19 职场文书
甲午大海战观后感
2015/06/02 职场文书
党性修养心得体会2016
2016/01/21 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis