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用于接收经过后台处理之后返回到前台的数据,这里只是将后台返回来的数据显示在文本框内。
<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开发——前后台异步调用的更多相关文章
- day5 liaoxuefeng---访问数据库、web开发、异步IO
一.访问数据库 二.web开发 三.异步IO
- MacOS和iOS开发中异步调用与多线程的区别
很多童鞋可能对Apple开发中的异步调用和多线程的区别不是太清楚,这里本猫将用一些简单的示例来展示一下它们到底直观上有神马不同. 首先异步调用可以在同一个线程中,也可以在多个不同的线程中.每个线程都有 ...
- SpringBoot:异步开发之异步调用
前言 除了异步请求,一般上我们用的比较多的应该是异步调用.通常在开发过程中,会遇到一个方法是和实际业务无关的,没有紧密性的.比如记录日志信息等业务.这个时候正常就是启一个新线程去做一些业务处理,让主线 ...
- SpringBoot | 第二十一章:异步开发之异步调用
前言 上一章节,我们知道了如何进行异步请求的处理.除了异步请求,一般上我们用的比较多的应该是异步调用.通常在开发过程中,会遇到一个方法是和实际业务无关的,没有紧密性的.比如记录日志信息等业务.这个时候 ...
- 007-优化web请求三-异步调用【WebAsyncTask】
一.什么是同步调用 浏览器发起请求,Web服务器开一个线程处理,处理完把处理结果返回浏览器.好像没什么好说的了,绝大多数Web服务器都如此般处理.现在想想如果处理的过程中需要调用后端的一个业务逻辑服务 ...
- Excel催化剂开源第8波-VSTO开发之异步调用方法
在VSTO开发过程中,因其和普通的Winform开发有点差别,具体细节笔者也说不清楚,大概是VSTO的插件是寄生在Excel中,不属于独立的进程之类的,其异步方法调用时,未能如Winform那样直接用 ...
- SpringBoot学习笔记(十七:异步调用)
@ 目录 1.@EnableAsync 2.@Async 2.1.无返回值的异步方法 2.1.有返回值的异步方法 3. Executor 3.1.方法级别重写Executor 3.2.应用级别重写Ex ...
- Windows 8 应用开发 - 异步调用
原文:Windows 8 应用开发 - 异步调用 不论是桌面客户端还是Web应用通常会出现处理时间较长的操作,为了在这段时间内不影响用户与应用之间的交互体验,开发人员通常会使用异步调用技术,使 ...
- 用Html5/CSS3做Winform,一步一步教你搭建CefSharp开发环境(附JavaScript异步调用C#例子,及全部源代码)上
本文为鸡毛巾原创,原文地址:http://www.cnblogs.com/jimaojin/p/7077131.html,转载请注明 CefSharp说白了就是Chromium浏览器的嵌入式核心,我们 ...
随机推荐
- CentOS中源码编译安装Nginx
1.从官网通过wget命令将Nginx源码包下载到Linux上 Nginx下载页面:http://nginx.org/en/download.html 2.在Linux上安装需要依赖的环境 yum ...
- springMVC上传功能(单文件和多文件上传)
单文件和多文件上传 首先在xxx-select.xml里面配置上传的大小和编码 <bean id="multipartResolver" class="org.sp ...
- UESTC - 1137 数位DP
#include<iostream> #include<algorithm> #include<cstdio> #include<cstring> #i ...
- spark第三篇:Cluster Mode Overview 集群模式预览
Spark applications run as independent sets of processes on a cluster, coordinated by the SparkContex ...
- Json化数据-调微信接口
// 先获取用户openid列表 List<String> openids = wxPhotoUpload.getUserOpenIdList(access_token); TreeMap ...
- Nginx 配置跨域权限
今天设置静态资源服务器时发现 Font from origin 'http://start.fbzl.org' has been blocked from loading by Cross-Origi ...
- drupal 7 安装失败后的补救办法
在安装 drupal 7 时安装,导入数据库已经成功,但是在安装语言包的时候卡住了,没有进行最后三步,管理员帐号没能启用.此时我退出安装,访问网站,没有问题.但是管理员admin的密码没有设置,以至于 ...
- 成功配置TOMCAT的LOG4J日志系统,格式:HTML+每天以YYYY-MM-DD.LOG命名的日志文件
关于log4j.properties文件在web项目中放的位置,找过很多,最后实践结果是: 一.web项目 二.放在src的目录里面,然后项目生成后会自动在\WEB-INF\classes文件里有份l ...
- java中的各种修饰符作用范围
访问修饰符: private 缺省 protected public 作用范围: 访问修饰符\作用范围 所在类 同一包内其他类 其他包内子类 其他包内非子类 private 可以访问 不可以 不可以 ...
- TOJ 2452 Ultra-QuickSort
描述 In this problem, you have to analyze a particular sorting algorithm. The algorithm processes a se ...