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的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
Jquery $when done then的用法详解
May 20 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 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中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
php 设计模式之 单例模式
2008/12/19 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
js下弹出窗口的变通
2007/04/18 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
整理Python 常用string函数(收藏)
2016/05/30 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python开发简易版在线音乐播放器
2017/03/03 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Python如何实现转换URL详解
2019/07/02 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
人事任命书格式
2014/06/05 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
2015元旦节寄语
2014/12/08 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python