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事件模拟
Jun 27 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 Javascript
js实现坦克大战游戏
Feb 24 Javascript
Element Carousel 走马灯的具体实现
Jul 26 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中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP字符串word末字符实现大小写互换的方法
2014/11/10 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
php桥接模式应用案例分析
2019/10/23 PHP
javascript中的对象和数组的应用技巧
2007/01/07 Javascript
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
利用jQuary实现文字浮动提示效果示例代码
2013/12/26 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
Keras搭建自编码器操作
2020/07/03 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
实践单位评语
2014/04/26 职场文书
服务承诺书
2015/01/19 职场文书
田径运动会通讯稿
2015/07/18 职场文书
文明礼貌主题班会
2015/08/14 职场文书