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 相关文章推荐
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 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中的类-什么叫类
2006/11/20 PHP
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
浅析php变量作用域的一些问题
2013/08/08 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
jQuery 源码分析笔记(4) Ready函数
2011/06/02 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
解释一下钝化(Swap out)
2016/12/26 面试题
公务员的自我鉴定
2013/10/26 职场文书
店长岗位职责
2013/11/21 职场文书
网络工程专业自荐信范文
2014/03/16 职场文书
工作保证书怎么写
2015/02/28 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书