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 相关文章推荐
Javascript中的变量使用说明
May 18 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
js正则表达式的使用详解
Jul 09 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
Vue多种方法实现表头和首列固定的示例代码
Feb 02 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 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中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
js 利用className得到对象的实现代码
2011/11/15 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python中partial()基础用法说明
2018/12/30 Python
在python里从协程返回一个值的示例
2019/02/19 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
学习普通话的体会
2014/11/07 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL
Python find()、rfind()方法及作用
2022/12/24 Python