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 相关文章推荐
一个php+js实时显示时间问题
Oct 12 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
简单实现node.js图片上传
Dec 18 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
vue实现节点增删改功能
Sep 26 Javascript
ant design实现圈选功能
Dec 17 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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使用MySQL保存session会话的方法
2015/06/26 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
详解如何在微信小程序开发中正确的使用vant ui组件
2018/09/13 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
python判断字符串是否纯数字的方法
2014/11/19 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Python3中exp()函数用法分析
2019/02/19 Python
django 微信网页授权登陆的实现
2019/07/30 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
运动会开幕式邀请函
2014/02/03 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
寒假家长评语大全
2014/04/16 职场文书
服务承诺书怎么写
2014/05/24 职场文书
质量月口号
2014/06/20 职场文书
2015新年寄语大全
2014/12/08 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
公司出纳岗位职责
2015/03/31 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
MySQL慢查询的坑
2021/04/28 MySQL