JavaScript调用后台的三种方法实例

最新推荐文章于 2023-11-30 10:31:01 发布
最新推荐文章于 2023-11-30 10:31:01 发布
阅读量936 收藏
点赞数

方法一：直接使用<%=%>调用

前台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;
        }

ZhouJiali123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现接口（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-07 70
JavaScript实现接口（附完整源码）
js调用后台servlet方法实例
12-09
1.使用document.form.action方式 相关源码如下： *.js [javascript] 代码如下:  document.getElementById(“sendPerson”).value = SendPerson;  document.getElementById(“currentTime”).value = currentTime();  document.getElementById(“message”).value = message;  document.getElementById(“r
JavaScript 调用后台事件和方法
隨鈊鎍慾
01-26 1056
1、后台方法： protected string CsharpVoid(string strCC) { strCC = "http://" + strCC; return strCC; } 2、前台页面JavaScript方法： var v = "www.baidu.com"; var s = ; document.write(s); 二，
多种方式实现JS调用后台方法进行数据交互
12-11
项目开发过程中很多地方都需要前端和后台的数据交互，几种典型常用的方法如利用控件的AutopostBack属性、Button提交表单等等。但这些都是有条件的，AutoPostBack具有实时性但会刷新页面，Button提交表单不能实现数据交互的实时性。当然说到前台与后台的数据交互更不能漏掉ajax,ajax实现前台与后台数据的异步交互，并且保证实时的、局部刷新。但有些数据不需要异步交互，例如当交互的数据是下一步执行的条件时，就必须要等到数据前台与后台数据交互完成后才能继续执行程序。所以对于掌握js与后台数据交互的方法还是很有必要的。 方法一 后台方法： 代码如下: <SPAN style=”C
JAVA调用JavaScript方法
qq_42796149的博客
06-27 5512
JAVA调用JavaScript方法
前端js调用后端API获取数据的三种方法（2022.7.25）
热门推荐
I have a dream, here my dreams come true!
07-25 4万+
js调用后台API进行http请求的三种方法（get-post)
js如何调用api接口数据,javascript调用api接口
chatgpt001的博客
11-30 3461
随着云计算分布式微服务技术的发展，现有网络项目大都基于前后端分离的技术手段实施，一方面是便于缓解后台服务器的压力，充分利用各台服务节点的计算和存储资源，尽可能地提高服务器性能；另一方面可提高服务的可靠性、容灾能力，以便在某服务节点上服务器甚至节点崩溃的情况下得以对该服务快速有效地进行替换或恢复，表现为极强的修复能力（注：先进制造技术的发展和充足的材料供应能力使得时间、价格方面的维修成本不断高于替换成本，让废旧品及时得到回收利用再生产，从而减少繁琐的维修过程，以便缩短维修时间，即能换不修原则）。在Web。
JS调后端接口
m0_37894254的博客
12-06 2610
js调后台接口
【js】调用后端接口下载资源
可乐大牛的博客
05-28 1348
目录概述解决 概述 之前有个需求是将一些数据以及图片打包下载，我写了两个接口，一个是将数据以及图片打包，然后返回它的地址，然后另一个接口处理资源下载，参数就是前面得到的地址，如 /file/loadFile?path=地址 本来以为这就结束了，没想到前端请求的时候不断出现问题。 我使用window.location.href=和window.open()这两个函数，但是都出现一个问题，就是文件确实下载了，但是文件名就是loadFile，也就是接口名称，给我整无奈了。 解决 后面发现了如下的做法可以解决：就是
JS调用后台方法大全
weixin_30810239的博客
07-06 5173
javascript函数中执行C#代码中的函数：方法一：1、首先建立一个按钮，在后台将调用或处理的内容写入button_click中;2、在前台写一个js函数，内容为document.getElementById("btn1").click();3、在前台或后台调用js函数，激发click事件，等于访问后台c#函数；方法二：1、函数声明为public...
C#通过html调用WinForm的方法
01-21
本文实例讲述了C#通过html调用WinForm的方法。分享给大家供大家参考，具体如下： 完整测试代码： Form1.cs： using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
使用<script>来更快速的请求接口
screaming_color的博客
01-05 3153
话说前几天的任务吧，是一个整个页面数据都需要请求接口来渲染的配置页面（标题/图标什么的也都是后台提供），我本想用AJAx来请求的，但是导师review的时候表示这样页面加载会比较慢，让我尝试用<script> 来请求那些不会频繁的数据。首先定义我们的数据处理函数
java后端调另一个项目的接口并获取json返回值_欢迎使用EasyType：一个基于TypeScript的动态类型反射系统...
weixin_34379309的博客
12-22 576
项目地址: https://github.com/davanchen/easytype欢迎使用EasyType：一个基于TypeScript的动态类型反射系统众所周知JavaScript因为语言的特性，无法与JAVA一样提供一种动态类型反射机制，而市面上又缺乏完善的解决方案，EasyType的出现是为了从根本上解决这个问题, 赋予开发者尤其是后端开发者更多的能力。警告：单元测试未完全覆盖，切勿用于...
java接口文档示例_Java Scripting API 使用示例
weixin_39592315的博客
12-02 784
Java Scripting API 包含一组类和接口，在 javax.script 包中定义。这是一个相对比较小的 Java 包，以 ScriptEngineManager 类作为起点。一个 ScriptEngineManager 对象可以通过 JAR 文件服务发现机制来查找脚本引擎，而实例化 ScriptEngine 对象的解析脚本使用专门的脚本语言编写。更多关于 javax.script 包...
java Script 接口实现 简单实例
CuiTrek的博客
12-14 1208
百度啊<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script> //创建接口:注释描述接口/属性检测接口/鸭式辨型接口 (function() {
JavaScript 请求服务端接口
忧郁的蛋的专栏
01-18 2862
上面的代码中，XMLHttpRequest 使用 open() 和 send() 方法来配置和发出请求，然后使用 onreadystatechange 属性来处理响应。总之，请求服务端接口时，需要考虑很多因素，如请求地址，请求方式，请求参数，跨域问题，请求头等，请根据需要来编写代码。可以查看文档来获取更多信息。在发送请求时，需要考虑请求头和验证，如果服务端需要认证，可能需要在请求头中添加相关信息。需要注意的是，在请求服务端接口时，您需要确保您有权限访问该接口，并且接口是正确的、可用的。
前台通过JS请求后台的几种方法
u012682006的博客
02-23 3万+
前台js请求后台的几种方法的汇总
99-智慧园区数据平台方案.pptx
最新发布
04-27
99-智慧园区数据平台方案.pptx
.net core6 signalr 后台发消息给前台实例git下载
09-19
最后，你可以通过调用后台方法来发送消息到前端实例，例如： ```csharp public class HomeController : Controller { private readonly IHubContext<MyHub> _hubContext; public HomeController(IHubContext...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值