做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用于接收经过后台处理之后返回到前台的数据,这里只是将后台返回来的数据显示在文本框内。 

<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)后台

  首先贴代码~~  

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

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

  1. day5 liaoxuefeng---访问数据库、web开发、异步IO

    一.访问数据库 二.web开发 三.异步IO

  2. MacOS和iOS开发中异步调用与多线程的区别

    很多童鞋可能对Apple开发中的异步调用和多线程的区别不是太清楚,这里本猫将用一些简单的示例来展示一下它们到底直观上有神马不同. 首先异步调用可以在同一个线程中,也可以在多个不同的线程中.每个线程都有 ...

  3. SpringBoot:异步开发之异步调用

    前言 除了异步请求,一般上我们用的比较多的应该是异步调用.通常在开发过程中,会遇到一个方法是和实际业务无关的,没有紧密性的.比如记录日志信息等业务.这个时候正常就是启一个新线程去做一些业务处理,让主线 ...

  4. SpringBoot | 第二十一章:异步开发之异步调用

    前言 上一章节,我们知道了如何进行异步请求的处理.除了异步请求,一般上我们用的比较多的应该是异步调用.通常在开发过程中,会遇到一个方法是和实际业务无关的,没有紧密性的.比如记录日志信息等业务.这个时候 ...

  5. 007-优化web请求三-异步调用【WebAsyncTask】

    一.什么是同步调用 浏览器发起请求,Web服务器开一个线程处理,处理完把处理结果返回浏览器.好像没什么好说的了,绝大多数Web服务器都如此般处理.现在想想如果处理的过程中需要调用后端的一个业务逻辑服务 ...

  6. Excel催化剂开源第8波-VSTO开发之异步调用方法

    在VSTO开发过程中,因其和普通的Winform开发有点差别,具体细节笔者也说不清楚,大概是VSTO的插件是寄生在Excel中,不属于独立的进程之类的,其异步方法调用时,未能如Winform那样直接用 ...

  7. SpringBoot学习笔记(十七:异步调用)

    @ 目录 1.@EnableAsync 2.@Async 2.1.无返回值的异步方法 2.1.有返回值的异步方法 3. Executor 3.1.方法级别重写Executor 3.2.应用级别重写Ex ...

  8. Windows 8 应用开发 - 异步调用

    原文:Windows 8 应用开发 - 异步调用     不论是桌面客户端还是Web应用通常会出现处理时间较长的操作,为了在这段时间内不影响用户与应用之间的交互体验,开发人员通常会使用异步调用技术,使 ...

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

    本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...

随机推荐

  1. SQL中删除重复的行(重复数据),只保留一行 转

    方法一:使用在T-SQL的编程中 分配一个列号码,以COL1,COL2组合来分区排序,删除DATABASE重复的行(重复数据),只保留一行 // COL1,COL2是数据库DATABASE的栏位 de ...

  2. apache的URL重写

    apache的url重写 第一步:修改apache\conf目录下的的httpd.conf文件 1.加载apache的url重写模块 大概122行:LoadModule rewrite_module ...

  3. JAVA数据结构--插入排序

    插入排序(英语:Insertion Sort)是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in- ...

  4. Miller_Rabin素数测试【学习笔记】

    引语:在数论中,对于素数的研究一直就很多,素数测试的方法也是非常多,如埃式筛法,6N±1法,或者直接暴力判(试除法).但是如果要判断比较大的数是否为素数,那么传统的试除法和筛法都不再适用.所以我们需要 ...

  5. 1095 解码PAT准考证 (25 分)

    PAT 准考证号由 4 部分组成: 第 1 位是级别,即 T 代表顶级:A 代表甲级:B 代表乙级: 第 2~4 位是考场编号,范围从 101 到 999: 第 5~10 位是考试日期,格式为年.月. ...

  6. wamp下localhost目录Your Projects下项目无法打开解决方案

    最近在学PHP,然后可能遇到各种小白问题,记录下来当做自己成长的见证吧: wamp下localhost目录Your Projects下项目无法打开,但是在url中输入项目可以访问到. 解决方案: 注意 ...

  7. Python入门(1)

    1.编程语言 机器语言:直接用计算机能听懂的二进制指令去编写程序,需要了解硬件的细节 汇编语言:用英文标签取代二进制指令去编写程序,同样需要了解硬件的细节 高级语言:直接用人类能理解的表达方式去编写程 ...

  8. Tesorflow-自动编码器(AutoEncoder)

    直接附上代码: import numpy as np import sklearn.preprocessing as prep import tensorflow as tf from tensorf ...

  9. android apk重新[签名]

    1,删除之前的签名文件 用解压缩工具打开,删除 [META-INF] 文件夹 2,打开命令行窗口 3,[保证签名文件和apk在同一级目录下] 然后执行如下命令,将 (xx) 处替换自己的签名.apk ...

  10. 盒子绝对定位 position:foxed ; 居中

    方法1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...