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 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 Javascript
学习ExtJS Column布局
Oct 08 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
js电话号码验证方法
Sep 28 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
vue左侧菜单,树形图递归实现代码
Aug 24 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 fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP迭代与递归实现无限级分类
2017/08/28 PHP
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
JQ实现新浪游戏首页幻灯片
2015/07/29 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
Vue select 绑定动态变量的实例讲解
2020/10/22 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
分享vim python缩进等一些配置
2018/07/02 Python
python实现大转盘抽奖效果
2019/01/22 Python
Python各种扩展名区别点整理
2020/02/27 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Python实现加密的RAR文件解压的方法(密码已知)
2020/09/11 Python
共产党员公开承诺书范文
2014/03/28 职场文书
怎样填写就业意向
2014/04/02 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
怎样写观后感
2015/06/19 职场文书
行政处罚听证告知书
2015/07/01 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
MySql统计函数COUNT的具体使用详解
2022/08/14 MySQL
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL