Ajax与C#应用详细实例
实现刷新的方法主要是Ajax,本文档实现Ajax有两个方法(Jquery 和 W3C的JS方法);其次,使用JS也可以实现刷新数据不刷新页面(详见其他刷新页面方法JS实现);对于CallbackRefresh的方法也可以实现刷新。
上面的方法都是在页面不刷新情况下刷新数据,Iframe实现的刷新会刷新页面,此方法可以借鉴。
Ajax的实现:
Javascript方式:
<script type="text/javascript"> function loadXMLDoc(str) { var xmlhttp; var txt, x, i; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == && xmlhttp.status == ) { xmlDoc = xmlhttp.responseXML; //xmlDoc = xmlhttp.responseText; txt = ""; x = xmlDoc.getElementsByTagName("TagName"); for (i = ; i < x.length; i++) { if (x[i].childNodes[].nodeValue.contains(str)) { txt = txt + x[i].childNodes[].nodeValue; } } document.getElementById("txtHint").innerHTML = txt; } } xmlhttp.open("GET", "url", true); xmlhttp.send(); }
jquery:
<script type="text/javascript"> function loadXMLDoc(str) { $("div").ajaxError(function(){ alert("An error occurred!"); }); $("#txt").ajaxStart(function(){ alert("AJAX 请求已成功完成"); }); $("div").ajaxSuccess(function(){ alert("AJAX 请求已成功完成"); }); $("#txt").ajaxComplete(function(){ alert("AJAX 请求已成功完成"); }); $("button").click(function(){ $("#txt").load("url"); }); }
URL的使用:
Txt:
如果是 e.txt
xmlDoc = xmlhttp.responseText;
XML:
如果是e.xml
xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("TagName"); x[i].childNodes[].nodeValue
asp页面:
如果是Asp页面 可以用下面方法调用方法获取返回值:
URL:"WebForm1.aspx?city=" + "beijing"
页面方法一:
在被请求页面的WebForm1.aspx.cs 的Page_Load 里面写:
protected void Page_Load(object sender, EventArgs e) { //获取传递过来的参数 string city =Request.QueryString["city"]; Response.Clear(); //判断城市名 switch (city) { case "beijing": //填充相关的区域 Response.Write("朝阳,海淀,东城,西城"); break; case "shanghai": Response.Write("浦东,静安,虹口,徐汇"); break; case "jinan": Response.Write("历下,历城,市中,天桥"); break; } }
页面方法二:
直接在被请求页面WebForm1.aspx 页面写代码
<% response.write("<table>") response.write("<tr><td><b>" & "asda" & "</b></td>") response.write("<td>" & "asdad" & "</td></tr>") response.write("</table>") %>
其他的刷新页面方法:
方法1:
CallbackRefresh:
页面调用方法
<script type="text/javascript"> function FillData() { var city=document.getElementById("TextBox1").value; <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null) %>; } function FillDll(strcity) { document.getElementById("DropDownList1").options.length=; var indexofcity; var city; //切割传递来的字符串 while(strcity.length>) { //判断是否是最后一个字符串 indexofcity=strcity.indexOf(","); if(indexofcity >) { city=strcity.substring(,indexofcity); strcity=strcity.substring(indexofcity+); //填充下拉框 document.getElementById("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一个字符串 document.getElementById("DropDownList1").add(new Option(strcity,strcity)); break; } }; } </script>
后台代码:要继承ICallbackEventHandler (重要)
public partial class _Default : System.Web.UI.Page,ICallbackEventHandler { private string _data; protected void Page_Load(object sender, EventArgs e) { } #region ICallbackEventHandler 成员 public string GetCallbackResult() { //返回处理后的数据 return _data; } public void RaiseCallbackEvent(string eventArgument) { //判断传递过来的参数 switch (eventArgument) { case "北京": _data = "朝阳,海淀,东城,西城"; break; case "上海": _data = "浦东,静安,徐汇,虹口"; break; case "济南": _data = "历城,历下,市中,天桥"; break; } } #endregion }
JS 实现局部刷新: 后台代码如下:
protected void Page_Load(object sender, EventArgs e) { //创建字符串连接对象 StringBuilder myscript = new StringBuilder(); //使用字符串组织一个JavaScript脚本方法 myscript.Append("function seekCity() {\n"); myscript.Append("var city=document.getElementById('TextBox1').value; \n"); myscript.Append("switch(city) {\n"); myscript.Append("case '北京': \n"); myscript.Append("FillData('" + GetCityStr("北京") +"'); \n"); myscript.Append("break; \n"); myscript.Append("case '上海': \n"); myscript.Append("FillData('" + GetCityStr("上海") + "'); \n"); myscript.Append("break; \n"); myscript.Append("case '济南': \n"); myscript.Append("FillData('" + GetCityStr("济南") + "'); \n"); myscript.Append("break; }\n"); myscript.Append(" }\n"); //使用注册脚本方法在页面的客户端,注册这个字符串编写的脚本方法。 Page.ClientScript.RegisterClientScriptBlock(typeof(string), "seekCity", myscript.ToString(),true); } //通过获取城市名,返回城市的区县字符串 private string GetCityStr(string INcity) { string city=""; switch (INcity) { case "北京": city = "朝阳,海淀,东城,西城"; break; case "济南": city = "历城,历下,市中,天桥"; break; } //返回包含区县的 字符串连接 return city; }
页面层直接调用:
onclick="seekCity()"
切割字符:
function FillData(strcity) { document.getElementById("DropDownList1").options.length=; var indexofcity; var city; //切割传递来的字符串 while(strcity.length>) { //判断是否是最后一个字符串 indexofcity=strcity.indexOf(","); if(indexofcity >) { city=strcity.substring(,indexofcity); strcity=strcity.substring(indexofcity+); //填充下拉框 document.getElementById("DropDownList1").add(new Option(city,city)); } else { // 如果是最后一个字符串 document.getElementById("DropDownList1").add(new Option(strcity,strcity)); break; } }; }
Iframe实现局部刷新:
要求刷新页面JS代码:
<script language="javascript"> function Search() { var city=document.getElementById("TextBox1").value; if(city !="") { document.getElementById("iframe1").src="myframe.aspx?city=" +city; } }
被请求页面代码:
<asp:DropDownList ID="DropDownList1" runat="server" Width="154px"> protected void Page_Load(object sender, EventArgs e) { //获取传递过来的参数 string city = Request.QueryString["city"]; //判断城市名 switch (city) { case "北京": //填充相关的区域 DropDownList1.Items.Clear(); DropDownList1.Items.Add("朝阳"); DropDownList1.Items.Add("海淀"); DropDownList1.Items.Add("东城"); DropDownList1.Items.Add("西城"); break; } }
Ajax与C#应用详细实例的更多相关文章
- jQuery Ajax方法调用 Asp.Net WebService、WebMethod 的详细实例代码
将以下html存为ws.aspx <%@ Page Language="C#" AutoEventWireup="true" %> <scri ...
- 原生AJAX入门讲解(含实例)
相对于jQuery.YUI以及其他一些类库的AJAX封装,原生JS的AJAX显得那么的尴尬,兼容性不好,要记很多的方法属性,调用不便捷,代码臃肿...但我还是想说,原生JS才是最根本最底层的知识(虽然 ...
- [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例二.
为了更好的排版, 所以将IK分词器的安装重启了一篇博文, 大家可以接上solr的安装一同查看.[Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一: http://ww ...
- Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误)
Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误) Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误) 升级到Truffle3.0 如果之前安装的是Truf ...
- SpringCloud+MyBatis+Redis整合—— 超详细实例(二)
2.SpringCloud+MyBatis+Redis redis①是一种nosql数据库,以键值对<key,value>的形式存储数据,其速度相比于MySQL之类的数据库,相当于内存读写 ...
- Ajax跨域:Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- SQL的7种连接查询详细实例讲解
SQL的7种连接查询详细实例讲解 原文链接:https://mp.weixin.qq.com/s/LZ6BoDhorW4cSBhaGy8VUQ 在使用数据库查询语句时,单表的查询有时候不能满足项目的业 ...
- jquery ajax php+mysql 无刷新分页 详细实例
最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...
- jquery ajax jsonp跨域调用实例代码
今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...
随机推荐
- jquery读取本地文件
<html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...
- bootstrap之noConflict的详解
翻开推特框架,不经发现,几乎所有的插件都会出现noConflict的写法来防止和其他的插件冲突!我们以button.js为例子,打开其源代码发现 如下: var old = $.fn.button $ ...
- js数组(一)
一.创建数组两种方法: 1Array构造 var colors = new Array();2.字面量表示什么事字面量,如 var colors = ["red","gr ...
- virtualBox 安装CentOS 全屏
在VirtualBox里安装CentOS系统,会遇到“增强工具”无法正常安装,主要的原因是出在Kernel 库找不到. 错误提示如下: 通过查看日志文件: cat /var/log/vboxadd-i ...
- (极简)linux安装QT4.7.3
1.下载QT http://download.qt.io/ 我用的:qt-everywhere-opensource-src-4.7.3.tar.gz 2.解压安装QT 建议解压到/use/local ...
- mongodb 2.6.6 在window10下的安装
首先感谢波仔的知道,其次感叹下WIN10的牛叉,兼容性还不错. 首先,下载mongodb 2.6.6 安装包,可惜,官网太慢,还得注册.不过还好,我是个好人:http://pan.baidu.com/ ...
- .net通用权限框架B/S (五)--WEB(3)组织机构
.net通用权限框架B/S 首先我们看导航菜单中,对组织机构的设置 我们设置了组织机构名称,链接(对应的mvc控制器名/orga),图标是个小钥匙,菜单的操作权限设置的是"添加,编辑,删除& ...
- 改良版的SQL Service 通用存储过程分页
上次写了通用存储过程.感觉还是有很大的BUG.就是条件不能参数画化.这个BUG可以说是致命的.但是我一直想在用什么方法能解决这个东西.其实我只是想写少量的代码来做更多的事情.我想能不能传集合给存储过程 ...
- RESTful API学习与实践
参考文献: 1.Learn About ASP.NET Web API 2.深入浅出REST 3.Infoq上“深入探索REST”系列文章 4.RESTful API设计的一点经验 5.Angular ...
- MySQL常用指令
1.win下启动MySQL 命令行下输入: mysql –h localhost –u root -p / mysql -uroot -p 2.MySql下建表 输入命令 show database ...