多种方式实现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 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
jquery实现加载等待效果示例
Sep 25 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
uni-app实现点赞评论功能
Nov 25 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
php生成略缩图代码
2012/07/16 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
jquery实现图片上传前本地预览
2017/04/28 jQuery
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
微信小程序实现日历小功能
2020/11/18 Javascript
python实现同时给多个变量赋值的方法
2015/04/30 Python
django使用图片延时加载引起后台404错误
2017/04/18 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
打造完美自荐信
2014/01/24 职场文书
演讲主持词
2014/03/18 职场文书
明信片寄语大全
2014/04/08 职场文书
大学同学会活动方案
2014/08/20 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
社区元宵节活动总结
2015/02/06 职场文书
2015年医院保卫科工作总结
2015/07/23 职场文书
小学语文教学反思范文
2016/03/03 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS
图文详解nginx日志切割的实现
2022/01/18 Servers
关于MySQL中explain工具的使用
2023/05/08 MySQL