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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
May 03 Javascript
浅析IE10兼容性问题(frameset的cols属性)
Jan 03 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 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实现多级树型菜单
2006/10/09 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
Codeigniter中集成smarty和adodb的方法
2016/03/04 PHP
如何打开php的gd2库
2017/02/09 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
javascript中length属性的探索
2011/07/31 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
javascript时间差插件分享
2016/07/18 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
基于JS开发微信网页录音功能的实例代码
2019/04/30 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
质量承诺书怎么写
2014/05/24 职场文书
小学班级特色活动方案
2014/08/31 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
新手初学Java网络编程
2021/07/07 Java/Android