JavaScript调用后台的三种方法实例


Posted in Javascript onOctober 17, 2013

方法一:直接使用<%=%>调用

前台JS:

<script type="text/javascript">  
       var methodStr = "<%=BehindMethod() %>";  
       alert(methodStr);  
       </script> 

后头方法:

public static string BehindMethod()
        {
            return "这是一个后台的方法";
        }

方法二:用ajax调用

前台js:

<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
 <script type="text/javascript"> 
var params = '{ext:"p9hp"}';  //参数,注意参数名要注意和后台方法参数名要一致        
        $(function(){
           $("#btnOk").click(function(){
            $.ajax({
                type:"POST",  //请求方式
                url:"AjaxDemo.aspx/GetImg",  //请求路径:页面/方法名字
                data: params,     //参数
                dataType:"text",  
                contentType:"application/json; charset=utf-8",
                beforeSend:function(XMLHttpRequest){  
                    $("#tips").text("开始调用后头方法获取图片路径,请等待");
                    $("#imgFood").attr("src","image/loading.gif");
                },
                success:function(msg){  //成功
                    $("#imgFood").attr("src",eval("("+msg+")").d);  
                    $("#tips").text("调用方法结束");
                },
                error:function(obj, msg, e){   //异常
                    alert("OH,NO");
                }               
            });
        });
        });
</script>

页面html:
<body>
    <form id="form1" runat="server">
    <div>
    <label id="tips"></label>
       <img id="imgFood" />
       <input value="点击我,给你看一张图片" type="button" width="35px" id="btnOk"  />    </div>
    </form>
</body>

后台方法:
[System.Web.Services.WebMethod]
        public static string GetImg(string ext)
        {
            System.Threading.Thread.Sleep(5000);//为了有点等待的效果,延迟5秒
            StringComparer sc = StringComparer.OrdinalIgnoreCase;
            string[] extArr = new string[] { "php", "asp", "aspx", "txt", "bmp" };
            bool f = extArr.Any(s=>sc.Equals(s,ext));   //判断传入的后缀名是否存在            if (f)
            {
                return "image/54222860.jpg";
            }
            return "image/star1.jpg";
        }

方法三:AjaxPro (也是ajax)

第一步:下载AjaxPro.dll(或者AjaxPro.2.dll),并且添加引用到项目

第二步:修改配置文件web.config 

<system.web>
<httpHandlers>
      <!--注册ajaxPro.2-->
      <add verb="*" path="*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
    </httpHandlers>
  </system.web>

第三步:对AjaxPro在页Page_Load事件中进行运行时注册。如:

        protected void Page_Load(object sender, EventArgs e)
        {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(AjaxDemo));  //注册
        }

第四步:创建服务器方法,并且用[AjaxPro.AjaxMethod]标注

        [AjaxPro.AjaxMethod]
        public string GetImgByAjaxPro()
        {
            return "image/54222860.jpg";
        }

第五步:前台JS的调用:

 function GetMethodByAjaxPro() {
            var a = JustTest.AjaxDemo.GetImgByAjaxPro();//JustTest是当前的名字空间,AjaxDemo表示后台类
            document.getElementById("imgAjaxPro").src = a.value;
        }
Javascript 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
List Information About the Binary Files Used by an Application
Jun 18 Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
基于javascript html5实现3D翻书特效
Mar 14 Javascript
jquery 手势密码插件
Mar 17 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
js实现小星星游戏
Mar 23 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
Nov 06 Javascript
详解Vite的新体验
Feb 22 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 #Javascript
JS实现时间格式化的方式汇总
Oct 16 #Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 #Javascript
div模拟滚动条效果示例代码
Oct 16 #Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 #Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 #Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 #Javascript
You might like
一个好用的PHP验证码类实例分享
2013/12/27 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
2014/07/29 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
jQuery技巧总结
2011/01/01 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Django logging配置及使用详解
2019/07/23 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
简单英文演讲稿
2014/01/01 职场文书
大学开学计划书
2014/04/30 职场文书
国际商务专业求职信
2014/07/15 职场文书
孩子教育的心得体会
2014/09/01 职场文书
安全责任书
2015/01/29 职场文书
入党介绍人意见范文
2015/06/01 职场文书
甲午大海战观后感
2015/06/02 职场文书
停发工资证明范本
2015/06/12 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android