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 相关文章推荐
引用外部js乱码问题分析及解决方案
Apr 12 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
javascript常用的方法整理
Aug 20 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
js实现批量删除功能
Aug 27 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修改指定文件后缀的方法
2014/09/11 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
React组件重构之嵌套+继承及高阶组件详解
2018/07/19 Javascript
vue-cli系列之vue-cli-service整体架构浅析
2019/01/14 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
2020/03/02 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
Python爬取qq music中的音乐url及批量下载
2017/03/23 Python
使用Python3+PyQT5+Pyserial 实现简单的串口工具方法
2019/02/13 Python
详解Python3 pickle模块用法
2019/09/16 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
2019年.net常见面试问题
2012/02/12 面试题
IBatis持久层技术
2016/07/18 面试题
精彩广告词大全
2014/03/19 职场文书
地质灾害防治方案
2014/05/14 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
离婚协议书格式
2015/01/26 职场文书
干部培训简讯
2015/07/20 职场文书
工作感想范文
2015/08/07 职场文书