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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
node.js中的fs.fchownSync方法使用说明
Dec 16 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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
首页四格,首页五格For6.0(GBK)(UTF-8)[12种组合][9-18][版主安装测试通过]
2007/09/24 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
js调用flash的效果代码
2008/04/26 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
node.js中的console.dir方法使用说明
2014/12/10 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
2015/01/08 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
详谈Python基础之内置函数和递归
2017/06/21 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python学习笔记之字符串和字符串方法实例详解
2019/08/22 Python
在家更换处方镜片:Lensabl
2019/05/01 全球购物
高中历史教学反思
2014/02/08 职场文书
学校联谊活动方案
2014/02/15 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
邀请函的格式
2015/01/30 职场文书
老龙头导游词
2015/02/11 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers