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 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 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
JavaScript 程序编码规范
2010/11/23 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
Python实现的简单算术游戏实例
2015/05/26 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
python 爬虫请求模块requests详解
2020/12/04 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
单位成立周年感言
2014/01/26 职场文书
流动人口婚育证明
2014/10/19 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
鲁滨孙漂流记读书笔记
2015/06/30 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers