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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JavaScript构造函数详解
Dec 27 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
详解a++和++a的区别
Aug 30 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
JS原生瀑布流效果实现
Apr 26 Javascript
js JSON.stringify()基础详解
Jun 19 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
中国第一家无线电行
2021/03/01 无线电
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
深入php内核之php in array
2015/11/10 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
Python编程实现控制cmd命令行显示颜色的方法示例
2017/08/14 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
用Python开发app后端有优势吗
2020/06/29 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
物流管理应届生求职信
2013/11/07 职场文书
班主任班级寄语大全
2014/04/04 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
员工工作自我评价
2014/09/26 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年药店工作总结
2015/04/20 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书