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 Firefox3.5中操作select的问题
Jul 10 Javascript
JSON JQUERY模板实现说明
Jul 03 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
微信小程序进入广告实现代码实例
Sep 19 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
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
javascript面向对象之二 命名空间
2011/02/08 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
js实现固定显示区域内自动缩放图片的方法
2015/07/18 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python Queue模块详解
2014/11/30 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python开发之str.format()用法实例分析
2016/02/22 Python
Python基础教程之利用期物处理并发
2018/03/29 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
解析python的局部变量和全局变量
2019/08/15 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
社团文化节策划书
2014/02/01 职场文书
中学生打架检讨书
2014/02/10 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
三爱活动实施方案
2014/03/19 职场文书
《锄禾》教学反思
2014/04/08 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
研究生简历自我评
2015/03/11 职场文书
结婚仪式主持词
2015/06/29 职场文书