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方法的任意内容。

举例：

后台代码：

　　

[html] view plain copy

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Web.Services;
  8. namespace WebApplication4
  9. {
  10. public partial class WebForm10 : System.Web.UI.Page
  11. {
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. }
  15. [WebMethod]
  16. public static string test1(string userName)
  17. {
  18. return "hello "+userName+", 这是通过WebService实现前台调用后台方法";
  19. }
  20. }
  21. }

前台代码：

　　

[html] view plain copy

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

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

　　

方法二：通过<%=methodname()%>和<%#methodname()%>（methodname()为后台定义的方法）

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

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

2)     客户端js代码中

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

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

步骤：

后台

?  定义public或protected的变量或方法（不能为private）

前台

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

举例：

后台代码：

　　

[html] view plain copy

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace WebApplication4
  8. {
  9. public partial class WebForm1 : System.Web.UI.Page
  10. {
  11. public string name = "我是后台变量";
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. this.DataBind();
  15. }
  16. //不能为private
  17. protected string strTest() {
  18. return "这是前台通过<%# %>调用后台方法";
  19. }
  20. public void  strTest2()
  21. {
  22. Response.Write("这是前台通过<%= %>调用后台方法");
  23. }
  24. }
  25. }

前台代码：

　　

[html] view plain copy

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <div>
  11. <b>服务器控件</b><br /><br />
  12. 服务器端文本框绑定后台方法：<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br />　
  13. ......................变量：<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br />　
  14. 服务器端文本框绑定后台方法：<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />
  15. 服务器端文本框绑定后台方法：<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br />
  16. <br /><br />
  17. <b>客户端控件</b><br /><br />
  18. 客户端文本框绑定后台方法：<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />　
  19. 客户端标签: <div><%=strTest() %></div>
  20. </div>
  21. </form>
  22. </body>
  23. </html>

运行结果：

　　

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

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

后台代码：

　　

[html] view plain copy

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace WebApplication4
  8. {
  9. public partial class WebForm11 : System.Web.UI.Page
  10. {
  11. protected void Button1_Click(object sender, EventArgs e)
  12. {
  13. Response.Write("这是通过隐藏控件方式实现前台访问后台方法");
  14. }
  15. }
  16. }

前台代码：

　　

[html] view plain copy

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. <script type="text/javascript" >
  8. function test() {
  9. //通过客户端脚本选中隐藏控件，并调用后台相关方法
  10. document.getElementById("Button1").click();
  11. };
  12. </script>
  13. </head>
  14. <body>
  15. <form id="form1" runat="server">
  16. <%--隐藏服务端铵钮--%>
  17. <asp:Button ID="Button1" runat="server" Text="Button" style="display:none"  />
  18. <%--调用客户端脚本，间接调用后台方法--%>
  19. <input id="Button2" type="button" value="button" onclick="test()" />
  20. </form>
  21. </body>
  22. </html>

总结：

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

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

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

时间： 2024-10-12 02:45:03

js前台与后台数据交互-前台调后台【转】的相关文章

[email&#160;protected]$http服务与后台数据交互

1.httpBasic.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>$http与后台数据交互</title>    <meta charset="utf-8">        <link rel="stylesheet" href="../css/bootstrap.css">

MUI框架-09-MUI 与后台数据交互

MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们要清楚,怎么发,发给谁,返回的数据是什么内容,格式 先放一张图,给大家学习的动力: 然后今天呢,介绍的是调用 API,API 是什么呢,就是一个接口,比如知乎日报的API ,我们可以通过这个 API 获取到知乎上最新的消息,并且是 json 格式,我们就不用再去找数据了,其他类型 API 还有 百度

UMI学习-10 Dva 与后台数据交互

明天在线办公没时间学习了,今天晚上再更新一篇 代码提交一次:https://github.com/zhaogaojian/jgdemo 1.src下创建services目录 创建文件userSrv.ts export async function query(): Promise<any> { return request('user/getuserinfo'); } import axios from "axios" export default async functi

【SpringMVC学习09】SpringMVC与前台的json数据交互

json数据格式在接口调用中.html页面中比较常用,json格式比较简单,解析也比较方便,所以使用很普遍.在springmvc中,也支持对json数据的解析和转换,这篇文章主要总结一下springmvc中如何和前台交互json数据. 1. 两种交互形式 springmvc和前台交互主要有两种形式,如下图所示: 可以看出,前台传过来的方式有两种,一种是传json格式的数据过来,另一种就是在url的末尾传普通的key/value串过来,针对这两种方式,在controller中会有不同的解析,但是在

SpringMVC学习(十)——SpringMVC与前台的json数据交互

json数据格式在接口调用中.html页面中比较常用,json格式比较简单,解析也比较方便,所以使用很普遍.在SpringMVC中,也支持对json数据的解析和转换,这篇文章主要总结一下在SpringMVC中如何和前台交互json数据. 两种交互形式 SpringMVC和前台交互主要有两种形式,如下图所示: 可以看出,前台传过来的方式有两种,一种是传json格式的数据过来,另一种就是在url的末尾传普通的key/value串过来,针对这两种方式,在Controller类中会有不同的解析,但是在C

ajax请求得到后台数据，前台页面不用拼接 “字符串和HTML表格标签”，使用方便模板然后clone，显示表格

<%@page import="java.util.ArrayList"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="htt

ajax请求到后台数据，前台不用拼接字符串，一样显示到页面

<%@page import="java.util.ArrayList"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="htt

使用Jquery.AJAX方法和PHP后台数据交互小结

使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正确. 第二:在传输数据时,传输的数据格式是否正确. 第三:我遇到过 200 但是执行的是AJAX方法的错误方法,我总结了一下,一般都是PHP的数据格式不正确,所以,当遇到200 error时候,应该认真,仔细的检查PHP传输的数据格式是否争取,由于JSON的特性,所以,使用JSON的时候对数据格式规

简单的后台数据和前台数据交互.net

最近忙着做POS项目,心血来来潮写了点小项目. 更具要求是随机显示数据并且产生的数据是可以控制的.前台交互显示能够倒叙,切每次只显示一条,页面不能超过20条超过的部分做删除. 我先展示一下前台的代码,比较简单适合初学者. 因为时间问题,这里采用的是Dbfirst 因为不能让加载页面的时候出现空数据所以在加载的时候会初始化数据到页面上 然后是ajax调用的json数据 页面的ajax 前台大概就是这样 至于后台用的是winform 我直接贴出初始化数据库的代码 using PCDD.Service