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 相关文章推荐
Jquery截取中文字符串的实现代码
Dec 22 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
JS实现点击上移下移LI行数据的方法
Aug 05 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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 缓存函数代码
2008/08/27 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
浅谈javascript的分号的使用
2015/05/12 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
概述如何实现一个简单的浏览器端js模块加载器
2016/12/07 Javascript
js实现5秒倒计时重新发送短信功能
2017/02/05 Javascript
js实现登录与注册界面
2017/11/01 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
python图片验证码生成代码
2016/07/02 Python
Django实现表单验证
2018/09/08 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
django 信号调度机制详解
2019/07/19 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
Java的基础面试题附答案
2016/01/10 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
实习生个人的自我评价
2013/12/08 职场文书
高二化学教学反思
2014/01/30 职场文书
人事专员的岗位职责
2014/03/01 职场文书
工商管理本科生求职信
2014/07/13 职场文书
口才训练演讲稿范文
2014/09/16 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
好员工观后感
2015/06/17 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
德劲DE1102数字调谐收音机机评
2022/04/07 无线电
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python