js前台与后台数据交互-前台调后台

article/2025/9/16 20:18:47

 

  网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数据,然后将数据传给前台来显示出来(当然可以将后台代码嵌入到前台)。即:


  


  下面就讲前台与后台进行数据交互的方法,分前台调用后台方法与变量;台调用前台js代码。本文先介绍前者,后者在后面文章中介绍。


前台调用后台方法与变量:


方法一:通过WebService来实现

步骤:

后台

Ø  首先引入命名空间(using System.Web.Services;)

Ø  然后定义公共的静态的方法(必须为public和static的,且静态方法不能访问外部的非静态变量,此时后台与前台相当于父类与子类的关系),并在该方法头部上加上[System.Web.Services.WebMethod],来标注方法特性。

前台

Ø  添加ScriptManager服务器控件,并把其EnablePageMethods属性设为true。

Ø  通过PageMethods方法调用后台定义的public、static方法

 

PageMethods方法简介:

PageMethods.FunctionName(Paramter1,Parameter2,...,funRight,funError, userContext);

1)      Paramter1,Parameter2,...,表示的是FunctionName的参数,类型是Object或Array; 

2)      funRight是方法调用成功后的回调函数,对返回值进行处理

3)      funError是当后台的FunctionName方法发生异常情况下的执行的Js方法(容错处理方法), 

4)      userContext是可以传递给SuccessMethod方法,或是FailedMethod方法的任意内容。

举例:

后台代码:


  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace WebApplication4
{public partial class WebForm10 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}[WebMethod]public static string test1(string userName){return "hello "+userName+", 这是通过WebService实现前台调用后台方法";}}
}


前台代码:


  

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication4.WebForm10" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title>
</head>
<body><form id="form1" runat="server"><%--引入ScriptManager服务器控件--%><asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager><script type="text/javascript">function bclick() {PageMethods.test1("zhipeng", funRight);}function funRight(val)       //回调函数,用val接受后台代码test1的执行结果  {alert(val);             }</script><input id="Button1" type="button" value="方法测试" οnclick="bclick()" />//点击按钮会弹出对话框“通过WebService实现前台调用后台方法”</form>
</body>
</html>


点击按钮弹出如下对话框:


  



方法二:通过<%=methodname()%><%#methodname()%>methodname()为后台定义的方法)

这种方法调用的后台方法可能出现在前台的位置有3种情况:

1)     服务器端控件或HTML控件的属性

2)     客户端js代码中

3)     Html显示内容的位置(它作为占位符把变量显示于符号出现的位置)

这里对两者做简单实例,详细内容在后面文章中介绍

步骤:

后台

Ø  定义public或protected的变量或方法(不能为private)

前台

Ø  直接用<%= %>和<%# %>对后台变量或方法进行调用,两者的用法稍有差异(<%# %>基本上能实现<%= %>的所以功能)

举例:

后台代码:


  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace WebApplication4
{public partial class WebForm1 : System.Web.UI.Page{public string name = "我是后台变量";protected void Page_Load(object sender, EventArgs e){this.DataBind();}//不能为privateprotected string strTest() {return "这是前台通过<%# %>调用后台方法";}public void  strTest2(){Response.Write("这是前台通过<%= %>调用后台方法");}}
}


前台代码:


  

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title></head>
<body><form id="form1" runat="server"><div><b>服务器控件</b><br /><br />服务器端文本框绑定后台方法:<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br /> ......................变量:<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br /> 服务器端文本框绑定后台方法:<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />服务器端文本框绑定后台方法:<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br /><br /><br /><b>客户端控件</b><br /><br />客户端文本框绑定后台方法:<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />         客户端标签: <div><%=strTest() %></div></div></form>
</body>
</html>


运行结果:


  


<%=methodname()%>和<%#methodname()%>两种方式的详细介绍(联系与区别)会在后面文章中详细介绍。


方法三:通过隐藏服务端按钮来实现

后台代码:


  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;namespace WebApplication4
{public partial class WebForm11 : System.Web.UI.Page{protected void Button1_Click(object sender, EventArgs e){Response.Write("这是通过隐藏控件方式实现前台访问后台方法");}}
}


前台代码:


  

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script type="text/javascript" >function test() {//通过客户端脚本选中隐藏控件,并调用后台相关方法document.getElementById("Button1").click();};</script>
</head><body><form id="form1" runat="server"><%--隐藏服务端铵钮--%><asp:Button ID="Button1" runat="server" Text="Button" style="display:none"  /><%--调用客户端脚本,间接调用后台方法--%><input id="Button2" type="button" value="button" οnclick="test()" /></form>
</body>
</html>


总结:

  方法一的后台方法必须声明为public和static(否则会发生PageMethods未定义错误),正是由于要将方法声明为static,使得这两种方法都有局限性,即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法,后台方法中是不能访问非静态成员变量的。

  方法二,后台方法没有任何限制,但是前台调用的时候由于<%=%>是只读的,<%=%>适合于调用后台方法经过处理并返回给客户端使用,不适合于将数据传到后台供后台使用

  后面会讲后台调用前台js代码。。。


http://chatgpt.dhexx.cn/article/M8pKFklk.shtml

相关文章

EMQX的Web管理后台-Dashboard

一、引言 当EMQX安装好虽然可以使用Linux命令操作&#xff0c;但是作为一个MQTT的服务器&#xff0c;还是需要一个Web管理后台方便查看数据和操作。因此&#xff0c;EMQX启动后会默认加载一个名为「Dashboard」的插件&#xff0c;用以提供的一个后端 Web 控制台&#xff0c;通过…

web 前后台数据交互的方式

做web开发&#xff0c;很重要的一个环节就是前后台的数据的交互&#xff0c;数据从页面提交到contoller层&#xff0c;数据从controler层传送到jsp页面来显示。这2个过程中数据具体是如何来传送的&#xff0c;是本节讲解的内容。 首先说一下数据如何从后台的contorller层传送到…

(Web前端)后台管理系统框架收集

一、&#xff08;Web前端&#xff09;常用的后台管理系统框架 1、使用vue-element-admin https://panjiachen.github.io/vue-element-admin-site/zh/guide/ 模板建议使用 vueAdmin-template &#xff0c; 桌面端 electron-vue-admin 1.包含功能 登录/注销 权限验证 侧边栏…

什么是前端什么是后端?什么是前台后台

前台&#xff1a;呈现给用户的视觉和基本的操作。简单来说就是访问网站的人看到的内容和页面。下图以百度为例&#xff0c;我们看到的界面就是前台 后台&#xff1a;指程序的使用人员&#xff0c;管理人员经过密码或其他验证手段之后才可以看到的内容&#xff0c;一般可以进行一…

什么是前端、JavaWeb、Web前端、前台、后台

JavaWeb是java开发中的一个方向 Java有搞安卓的&#xff0c;搞Web的&#xff0c;搞嵌入式的&#xff0c;等等。。 JavaWeb就是指搞web方向的&#xff0c;JavaWeb分两块一块是服务器端 叫后端&#xff0c;另一块叫前端&#xff0c;也就是Web前端。前端就是用户能看到的部分&am…

(Web前端)十分优秀的后台管理框架收集

Web 开发中几乎的平台都需要一个后台管理&#xff0c;但是从零开发一套后台控制面板并不容易&#xff0c;幸运的是有很多开源免费的后台控制面板可以给开发者使用&#xff0c;以下是我整理的一些UI框架模板&#xff0c;可以拿来稍加改造就能直接使用 1、vue-element-admin h…

web 后台学习介绍

什么是后台 后台&#xff0c;指网站后台&#xff0c;有时也称为网站管理后台&#xff0c;是指用于管理网站前台的一系列操作&#xff0c;如&#xff1a;产品、企业信息的增加、更新、删除等。动态网页一般指的就是后台和静态页面结合的网页。例如&#xff0c;我们最常用的淘宝…

有关Web前端和后台的部分简介

有关Web前端和后台的部分简介 Web前端简述 1&#xff1a;Web前端是什么 Web前端技术包括JavaScript&#xff0c;ActionScript&#xff0c;CSS,xHTML等“传统”技术与Adobe RIA,Google Gears,以及概念性较强的交互式设计&#xff0c;艺术性设计较强的视觉设计等等。它所涵盖的…

java oozie任务状态_Oozie工作流分析

我们在实际的生成操作中经常需要将一些任务在晚上开启进行定时执行&#xff0c;或者多个作业&#xff0c;例如hive,mapreduce,shell等任务的组合调用。 我们可以使用linux的contab spervisor inotify-tool进行任务的配值&#xff0c;但是操作起来麻烦&#xff0c;而且没有可视…

Oozie--安装部署

Oozie的部署 1、上传解压2、配置Hadoop代理用户3、重启Hadoop集群4、解压lib包5、引入extjs6、修改oozie配置文件7、创建oozie元数据库8、初始化oozie为什么要将oozie的这些jar包放到hdfs上? 9、生成web项目10、配置环境变量11、Oozie的启动与关闭12、修改界面默认时区 参考&a…

【Oozie】CDH集群的oozie手把手快速入门

背景 在今天中午&#xff0c;本人快乐的干饭的时候&#xff0c;领导打电话过来询问oozie是个什么样的东西&#xff0c;能不能有个用例&#xff1f;在本人的理解里面&#xff0c;oozie主要是个调度工具。所以本篇为CDH集群的oozie的快速入门教程 环境准备 CDH集群一套CDH集群…

Oozie5.2.1源码编译及安装部署

Oozie5.2.1源码编译 一、准备工作二、开始编译三、安装部署四、运行测试五、总结六、编译后得版本 说明&#xff1a; 官网下载最新版本:https://oozie.apache.org/依赖环境&#xff1a;CentOS7JDK1.8maven-3.6.3pig-0.17.0参考官网 一、准备工作 下载maven、安装、修改setting…

关于oozie

一、定义 1.oozie是一个管理apache hadoop作业的工作调度系统 2.oozie的workflow jobs是由actions组成的有向无环图(DAG) 3.oozie的coordinate jobs是由时间(频率)和数据可用性的重复的workflow jobs . 4.oozie 与hadoop生态圈的其他部分及车鞥在一起&#xff0c;支持多种类型…

任务调度之Oozie详解

利用shell脚本通过crontab进行定时执行&#xff0c;这样实现的话比较简单&#xff0c;但是随着多个job复杂度的提升&#xff0c;无论是协调工作还是任务监控都变得麻烦&#xff0c;我们选择使用oozie来对工作流进行调度监控。 1. Oozie的特点 Oozie是管理hadoop作业的调度系统…

Oozie简介

在Hadoop中执行的任务有时候需要把多个Map/Reduce作业连接到一起&#xff0c;这样才能够达到目的。[1]在Hadoop生态圈中&#xff0c;有一种相对比较新的组件叫做Oozie[2]&#xff0c;它让我们可以把多个Map/Reduce作业组合到一个逻辑工作单元中&#xff0c;从而完成更大型的任务…

Oozie

文章目录 **一、** **Apache Oozie****1&#xff0e;** **Oozie概述****2&#xff0e;** **Oozie的架构****3&#xff0e;** **Oozie**基本原理**3.1&#xff0e;** **流程节点** **4&#xff0e;** **Oozie工作流类型****4.1&#xff0e;** **Work**Flow**4.2&#xff0e;** *…

工作流调度工具--Oozie

一、背景 一个完整的数据分析系统通常是由大量的任务单元组成&#xff0c;Shell脚本、Java程序、MapReduce程序、Hive脚本等等&#xff0c;各个任务单元之间存在时间先后及前后依赖关系。 为了很好的组织这样的复杂执行计划&#xff0c;需要一个工作流调度系统来调用执行。 简…

Oozie基础入门

前言&#xff1a; 因为工作需要用到oozie&#xff0c;但是网上的资料越看越迷茫&#xff0c;经过很大的努力&#xff0c;终于折腾清楚了&#xff0c;这里&#xff0c;做一个总结&#xff0c;帮助后来者更好地进行入门&#xff0c;当然&#xff0c;粗鄙之言&#xff0c;难免疏漏…

大数据调度工具oozie详细介绍

背景&#xff1a; 之前项目中的sqoop等离线数据迁移job都是利用shell脚本通过crontab进行定时执行&#xff0c;这样实现的话比较简单&#xff0c;但是随着多个job复杂度的提升&#xff0c;无论是协调工作还是任务监控都变得麻烦&#xff0c;我们选择使用oozie来对工作流进行调…

oozie详解

1、什么是Oozie Oozie是一种java web应用程序&#xff0c;它运行在java servlet容器中&#xff0c;并使用数据库来存储一下内容&#xff1a; ①工作流定义 ②当前运行的工作流实例&#xff0c;包括实例的状态和变量 Oozie工作流失放置在控制依赖DAG(有向无环图)中的一组动作&am…