Web开发——前后台异步调用

　　做web开发，最头疼的、最核心的部分或许就应该是前后台交互了，之前一直没弄明白，每次都不知道该如何去做。最近由于开发需要，加上有些朋友问起这个问题，不得不再次摸索前后台交互的方法。功夫不负有心人，总算是成功了。

　   问题描述：如下图，如何在前台根据红色框内选择的下拉框内容，从后台读数据库的内容显示在蓝色框内？？？

　　

　　解决方法：

　　（1）前台：

　　页面有一个select选择框和text文本框。注意select有个onchange事件，这个就是为了响应用户在前台做的操作。

　　　　<select
id="Select1" name="D1" runat="server" onchange="return datachange()"></select>

　　　　<input
id="Text1" type="text" />

　　响应事件具体实现如下代码，在该响应事件datachange()中，首先获取用户所选择的下拉框内的值，将该值传到后台进行相应处理。

　　<%=sCallBackFunctionInvocation%>
就是异步调用的入口。

　　showMsg(arg)函数arg用于接收经过后台处理之后返回到前台的数据，这里只是将后台返回来的数据显示在文本框内。　

+ ?





1

2

3

4

5

6

7

8

9

10

<script language="javascript"
type="text/javascript">

        function
datachange(){

            var
message = document.getElementById("Select1").value;

            <%=sCallBackFunctionInvocation%>

        }

        function
showMsg(arg)

        {

            document.getElementById("Text1").value = arg;

        }

    </script>

　　OK,前台就轻易搞定了。

　　（2）后台

　　首先贴代码~~　　

?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

public
partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler

{

    public
string sCallBackFunctionInvocation;

    public
string strResult = "";

    protected
void Page_Load(object
sender, EventArgs e)

    {

        Select1.Items.Add("aa");

        Select1.Items.Add("bb");

        Select1.Items.Add("cc");

        sCallBackFunctionInvocation = Page.ClientScript.GetCallbackEventReference(this, "message", "showMsg", "");

    }

    public
void RaiseCallbackEvent(string
arg)

    {

        if
(arg == "aa")

        {

            //执行相应的函数或语句

            strResult = arg + "——来自后台哦11";

        }

        else
if (arg == "bb")

        {

            //执行相应的函数或语句

            strResult = arg + "——来自后台哦22";

        }

        else
if (arg == "cc")

        {

            //执行相应的函数或语句

            strResult = arg + "——来自后台哦33";

        }

    }

    public
string GetCallbackResult()

    {

        return
strResult;

    }

}

　　从上述代码中，首先需要继承System.Web.UI.ICallbackEventHandler，不然之后在运行时会报如下的错误：　　

　　 再次，需要在Page_Load()函数中进行客户端函数注册。Page.ClientScriptManager.GetCallbackEventReference (Control, String(argument),
 String(clientCallback), String(context))  获取一个对客户端函数的引用；调用该函数时，将启动一个对服务器端事件的客户端回调。此重载方法的客户端函数包含指定的控件、参数、客户端脚本和上下文。

　　第三，在RaiseCallbackEvent(string
arg)函数中，arg是从前台传过来的值，即select下拉框中选择的值。在该函数中，开发者可以根据前台传过来的值，进行相应的操作，处理结果由strResult存储。（本来打算读取数据库中的内容，但是本篇博文主要是探讨前后台的交互，就使用最简单的语句进行代替了）。

　　  第四，string
GetCallbackResult()函数主要是为了处理回发到客户端的结果，即strResult。来几张结果图~

　　 至此，一个简单却能实现强大功能的web前后台数据调用就实现了，只要弄懂了这个处理机制，就觉得非常简单，是不是？！O(∩_∩)O

时间： 2024-10-18 01:25:38

Web开发——前后台异步调用的相关文章

深入学习Web Service系列----异步开发模式

概述 在本篇随笔中,通过一些简单的示例来说一下Web Service中的异步调用模式.调用Web Service方法有两种方式,同步调用和异步调用.同步调用是程序继续执行前等候调用的完成,而异步调用在后台继续时,程序也继续执行,不必等待方法处理完成而直接返回.具体的调用流程见下图: 对于同步调用方法而言,UI线程依赖于方法的实现,方法执行时间过长将导致UI无法及时与用户进行交互.我们知道,在Windows客户端中,每个进程都有单一的UI进程,在服务器中,可扩展性依赖于线程的使用.对于异步调用方法

用Html5/CSS3做Winform，一步一步教你搭建CefSharp开发环境（附JavaScript异步调用C#例子，及全部源代码）上

本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们用此开发Winform程序也就相当于在程序里面内嵌了一个谷歌浏览器.所以H5/CSS3以及各种Web开发界面设计的优势就可以完全发挥出来. 由于CefSharp更新及时,所以使用此浏览器控件可能是对于Html5/CSS3支持最优秀的方案了. 1.首先我用的是VS2015,这里新建一个空白解决方案.

关于Web开发里并发、同步、异步以及事件驱动编程的相关技术

一.开篇语 我的上篇文章<关于如何提供Web服务端并发效率的异步编程技术>又成为了博客园里“编辑推荐”的文章,这是对我写博客很大的鼓励,也许是被推荐的原因很多童鞋在这篇文章里发表了评论,有童鞋说我这篇文章理论化很严重,没有实际代码和具体项目做支撑,这个评论让我有种理论和实践脱节的味道,所以我想在这里谈谈我为什么要写这篇文章的原因,这篇文章是把我前不久学习多线程编程的一个总结. 当我从我书堆里找到所有与多线程开发相关的书籍简单阅读后,我发现了一个问题,在java里开发多线程最强有力的实践就是做服

mvc路由引起异步调用web服务的问题

从一篇blog得知使用脚本可以异步调用Web服务,觉得很新鲜,因为自己很少用到Web服务,所以决定写一写看看什么效果. 首先在UI项目(我使用的是MVC4.0)里创建一个Web服务. 添加Web服务后,默认有一个HelloWorld方法.调用该方法有两种形式,一是服务端通过实例化对象调用,二是前端脚本异步 调用.代码分别是: 1.服务端调用 public ActionResult Index() { WebService1 ws = new WebService1(); var str = ws

[SAP ABAP开发技术总结]Function远程、同步、异步调用

目录导航 声明:原创作品,转载时请注明文章来自SAP师太博客,并以超链接形式标明文章原始出处,否则将追究法律责任!原文出自: 20.1.         Function调用... 233 20.1.1.     更新FM:LUW.. 233 20.1.2.     RFC函数:远程调用... 234 20.1.2.1.           同步... 234 20.1.2.2.           异步... 234 20.1.2.2.1.       事务性RFC调用... 234 20.1

转Web开发的发展史---Web开发技术的演变

转自:http://blog.csdn.net/zzzkk2009/article/details/9849431 在接下来的几个月时间里,我打算写一系列关于完整web开发的文章.这第一篇文章虽然有所粗略,但也能够充分概括了在之前15年或者更久的时间里web应用程序如何进行演变.并且最后我会囊括下这段时间内所写的相关技术. 在过去的美好日子里,我们使用的是简单的web页面(包括动态gif图片!).作为精美设计的典范,苹果有着这样的一个网站: 在那时,Web开发还比较简单,开发者经常会去操作web

Web开发技术的演变

1. 静态页面时代 大学时候,上机还得换卡穿拖鞋,Novell的网络是很神奇的,然而更神奇的是通讯原理老师半神秘的讲他上 Internet,“Cernet(教育网)有条64K的出口,半年前还很快,现在已经比较卡了”.就这样,我们用Netscape指向Yahoo.那是一个HTML加图片的世界,充斥着各种花哨闪耀的字体和鞠躬的小人,蓝色连接点击后会奇幻的变色. 我们开始用不熟练的HTML和简陋的设计来设计网页,并且知道这边有个浏览器,那边有个叫WebServer的东西,但管理Sun工作站的机房老师总

web开发-前后端分离原理

前言 前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx+Tomcat的方式(也可以中间加一个Node.js)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础.这个步骤是系统架构从猿进化成人的必经之路.核心思想是前端HTML页面通过Ajax调用后端的restuful api接口并使用json数据进行交互. 在互联网架构中,名词解释: Web服务器:一般指像Nginx,A

Web开发入门不得不看

如今,各种互联网的Web应用程序层出不穷,那么如何快速入门,成长为一个优秀的Web开发工作者呢? 这个问题不容易回答,几乎所有的培训机构都不能清晰地解答. 所以对于Web开发刚刚入门的菜鸟们,我觉得只有通过去做,去实验,学会Web开发,可能是学着学着,实验着实验着就会了. 没有人告诉你如何去做.我学习的时候,我的导师只是给了我一堆视频,一堆文档.我们从明确一个目标开始:"哦,这个阶段,我要独立完成一个简单的Web应用程序,例如新闻发布系统". 或许学会如何开发Web应用程序只是在完成这