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 相关文章推荐
禁止F5等快捷键的JS代码
Mar 06 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
Oct 13 Javascript
关于js遍历表格的实例
Jul 10 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP实现显示照片exif信息的方法
2014/07/11 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
学习JavaScript设计模式(多态)
2015/11/25 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
vue-router之nuxt动态路由设置的两种方法小结
2018/09/26 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
Python时间获取及转换知识汇总
2017/01/11 Python
利用Python如何将数据写到CSV文件中
2018/06/05 Python
Python 实现键盘鼠标按键模拟
2020/11/18 Python
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
教师自荐信范文
2013/12/09 职场文书
项目合作协议书
2014/04/16 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript
用Python将GIF动图分解成多张静态图片
2021/06/11 Python