|
概述
學(xué)習(xí)AJAX的過程中，發(fā)現(xiàn)自己之前存在著很多的不足,，于是花了些時間,，總結(jié)了一些知識，現(xiàn)在和大家分享一下,。
前端和后端,，前臺和后臺前端和后端指的是客戶端和服務(wù)器端；前臺和后臺指的都是客戶端上瀏覽者瀏覽界面和管理者管理界面,。
get和post方法客戶端和服務(wù)器端進(jìn)行數(shù)據(jù)的傳遞通過的都是get方法或者post方法,。get方法的數(shù)據(jù)會留在瀏覽器中新返回頁面的url里面；post方法中的數(shù)據(jù)在瀏覽器的請求包內(nèi)的數(shù)據(jù)內(nèi)容里面,，服務(wù)器接收后,，如果沒有對齊進(jìn)行處理，那么我們就無法在返回頁面中找到相應(yīng)的數(shù)據(jù),。
腳本單純的說腳本太抽象,，從電影的角度說：電影后期編輯時，編輯師根據(jù)腳本對拍攝的影像進(jìn)行剪切,，排版,，加入特效等等相應(yīng)的操作；從計算機(jī)語言的角度說：HTML文檔后期運行時,，瀏覽器根據(jù)腳本(客戶端腳本)對HTML進(jìn)行相應(yīng)動態(tài)的處理和顯示,。具體讓我用一句話來說的話，腳本就是可以加工成型東西的機(jī)制,。
純HTML頁面之間數(shù)據(jù)傳遞和使用敘述單單使用html標(biāo)簽進(jìn)行數(shù)據(jù)的傳遞和使用(特指)是不可能實現(xiàn)的,，所以，這里說的“純”是可以有客戶端腳本的HTML頁面,，當(dāng)然,，另一個隱含的意思就是，這里沒有后臺腳本等等的參與,，所以,，你直接把數(shù)據(jù)提交給服務(wù)器,，這個方法是不管用的，也就是說post方法不可以實現(xiàn)純HTML頁面之間數(shù)據(jù)傳遞(可以)和使用(不可以),，在這里本人也會給出相應(yīng)post方法的數(shù)據(jù)傳遞的實現(xiàn)代碼,，好了，接著說本塊的這個話題,。 如何實現(xiàn)這個該功能呢？有什么方法呢,？一個思路是通過get方法,；另一個思路是通過瀏覽器中的cookie。 通過get方法傳遞數(shù)據(jù)的頁面代碼(通過3種方法實現(xiàn),，其它的大家自己再想一想,，本句不再重復(fù))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>利用鏈接標(biāo)簽a手動拼接url</title>
</head>
<body>
<a href="獲得url中的參數(shù).html?name=qingshan&sex=man">鏈接</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>利用javascript手動拼接url</title>
<script type="text/javascript">
//JavaScript中寫window.open("test3.html?name=qingshan&key=qingshan");彈出窗口一般不行
function Post(){
url="獲得url中的參數(shù).html?name=" + encodeURI(document.getElementById("name").value);
//頁面跳轉(zhuǎn),，并在url中傳遞數(shù)據(jù)
location.href=url; //location為對象
//window.location.href=url; location為對象
//window.location=url; location為屬性
//document.location=url;
}
</script>
</head>
<body>
<input type="text" name="name" id="name"/>
<input type="submit" value="提交" onclick="javascript:Post();" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用form表單自動拼接url</title>
</head>
<body>
<!--瀏覽器會自動在url后面加上相應(yīng)的值,形如：test.html?name=數(shù)值&sex=數(shù)值-->
<form method="get" action="獲得url中的參數(shù).html">
姓名：<input type="text" name="name" />
<br />
性別：<input type="text" name="sex" />
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
接收并顯示數(shù)據(jù)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>獲得url中的參數(shù)</title>
<script type="text/javascript">
/*
1,、從 URL 字符串中提取變量的值
2、字符串對象的indexof(),，substr(),，split(),toUpperCase()方法
*/
//方法一 href屬性
function Request(strName){
//BOM對象 獲取當(dāng)前頁面的url
var strHref = window.document.location.href;
//字符串對象的方法 獲取參數(shù)字符串開始的位置
var intPos = strHref.indexOf("?");
//取出參數(shù)字符串
var strRight = strHref.substr(intPos + 1);
//將多個參數(shù),，按照“&”進(jìn)行分割
var arrTmp = strRight.split("&");
for(var i = 0; i < arrTmp.length; i++){
//將一個參數(shù)字符串按照“=”分割成：參數(shù)名和參數(shù)值
var arrTemp = arrTmp[i].split("=");
if(arrTemp[0].toUpperCase() == strName.toUpperCase())
return arrTemp[1];
}
return "";
}
//方法二 search方法
/*
function Request(sPan){
var sQuery = document.location.search;
if(sQuery.indexOf("?") == 0)
sQuery = sQuery.substr(1);
if(sQuery.indexOf("&") >= 0){
var aQuery = sQuery.split("&");
var sTempQuery;
for (var nTempCount = 0; nTempCount < aQuery.length; nTempCount++){
sTempQuery = aQuery[nTempCount];
if (sTempQuery.indexOf("=") >= 0){
if (sTempQuery.substring(0,sTempQuery.indexOf("=")) == sPan){
//return deCodeURI(sTempQuery.substr(sTempQuery.indexOf("=") + 1)); JavaScript腳本
return sTempQuery.substr(sTempQuery.indexOf("=") + 1); //表單
}
}else
return false;
}
return false;
}else{
if (sQuery.indexOf("=") >= 0){
if (sQuery.substring(0,sQuery.indexOf("=")) == sPan){
//return decodeURI(sQuery.substr(sQuery.indexOf("=") + 1)); JavaScript腳本
return sQuery.substr(sQuery.indexOf("=") + 1);
}else
return false;
}else
return false;
}
}
*/
</script>
</head>
<body>
<form method=get action="test3.htm" name="myform">
<input type="text" name="name" value="請在文本輸入框里輸入內(nèi)容" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
//頁面加載完成后自動運行下面的代碼
Rtext=Request("name")
if(Rtext!=""){
myform.name.value=Rtext;
}
</script>
</body>
</html>
通過瀏覽器cookie傳送數(shù)據(jù)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>發(fā)送數(shù)據(jù)</title>
<script type="text/javascript">
//傳送的數(shù)據(jù)賦值到cookie中
function setCookie(name,value,path) //兩個參數(shù)，一個是cookie的名子,，一個是值
{
//var Days = 30; //此 cookie 將被保存 30 天
//var exp = new Date(); //new Date()("December 31, 9998");
//exp.setTime(exp.getTime() + Days*24*60*60*1000);
//document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
//document.cookie = name + "="+ escape (value) + ";expires=";
//escape()及unescapte()方法已過時,，現(xiàn)使用encodeURI()和decodeURI()
document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires=";
}
//從cookie中取出相應(yīng)的值
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
try{
if(arr != null)
return decodeURI(arr[2]);
return null;
}catch(err){
}
}
//刪除cookie中相應(yīng)的值
function delCookie(name)
{
var exp = new Date()();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//往cookie中添加傳送數(shù)據(jù)
setCookie("name","青山");
</script>
</head>
<body>
<a href="ReadCookie.html">跳轉(zhuǎn)</a>
</body>
</html>
顯示數(shù)據(jù)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>顯示數(shù)據(jù)</title>
<script type="text/javascript">
//往cookie中添加傳送的數(shù)據(jù)
function setCookie(name,value,path) //兩個參數(shù)，一個是cookie的名子,，一個是值
{
//var Days = 30; //此 cookie 將被保存 30 天
//var exp = new Date(); //new Date()("December 31, 9998");
//exp.setTime(exp.getTime() + Days*24*60*60*1000);
//document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
//document.cookie = name + "="+ escape (value) + ";expires=";
//escape()及unescapte()方法已過時,，現(xiàn)使用encodeURI()和decodeURI()
document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires=";
}
//從cookie中取出相應(yīng)的值
function getCookie(name)
{
//正則表達(dá)式的運用
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
try{
if(arr != null)
//避免中文亂碼問題
return decodeURI(arr[2]);
return null;
}catch(err){
}
}
//刪除cookie中相應(yīng)的值
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//從cookie中獲得數(shù)據(jù)
alert(getCookie("name"));
//刪除數(shù)據(jù)
delCookie("name");
alert("刪除？" + getCookie("name"));
</script>
</head>
<body>
</body>
</html>
post方法提交數(shù)據(jù)對于HTML中書寫form標(biāo)簽的方法在這里就不寫了,，下去有興趣的讀者可以自己寫一下,。下面用的方法是通過Javascript創(chuàng)建節(jié)點的方法，具體如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>模板</title>
<script type="text/javascript">
function addForm(){
//創(chuàng)建form標(biāo)簽,，并設(shè)置相應(yīng)的屬性
var fatherForm = document.createElement("form");
fatherForm.method="post"; //可以設(shè)置為get
fatherForm.action="a.html";
//創(chuàng)建第一個input標(biāo)簽,，并設(shè)置相應(yīng)的屬性
var firstInput = document.createElement("input");
firstInput.type="hidden"; //child1.setAttribute("type","text");
firstInput.name="name";
firstInput.value="青山";
//創(chuàng)建第二個input標(biāo)簽，并設(shè)置相應(yīng)的屬性
var secondInput = document.createElement("input");
secondInput.type="hidden";
secondInput.name="sex";
secondInput.value="男";
//將創(chuàng)建的input的節(jié)點添加到form標(biāo)簽里
fatherForm.appendChild(firstInput);
fatherForm.appendChild(secondInput);
//將創(chuàng)建的form節(jié)點添加到body標(biāo)簽里
//document.getElementById("body").appendChild(father);
document.body.appendChild(fatherForm);
//提交表單
fatherForm.submit();
}
</script>
</head>
<body id="body">
<input type="button" value="input" onclick="javascript:addForm();"/>
</body>
</html>
對于post的方法的驗證,，可以逐步的做,，可以先顯示創(chuàng)建的節(jié)點，然后通過工具查看相應(yīng)的請求(post或get)
ASP.net頁面之間的跳轉(zhuǎn) asp.net頁面之間的跳轉(zhuǎn)有多種思路,。思路一：客戶端直接進(jìn)行跳轉(zhuǎn)工作,；思路二：服務(wù)器端執(zhí)行相應(yīng)的服務(wù)器端代碼進(jìn)行相應(yīng)的跳轉(zhuǎn)工作；思路三：瀏覽器執(zhí)行服務(wù)器端返回的腳本進(jìn)行跳轉(zhuǎn),。 三種思路,，每一種思路都有很多具體的實現(xiàn),，例如：上面get和post就是一些具體的方法。在這里只寫一些本人認(rèn)為重點的內(nèi)容
不需要執(zhí)行服務(wù)器端代碼
1,、有javascript參與
修改屬性
1,、location.href="跳轉(zhuǎn)后的頁面.html";
2、window.location="跳轉(zhuǎn)后的頁面.html";
3,、window.location.href="跳轉(zhuǎn)后的頁面.html";
4,、document.location="跳轉(zhuǎn)后的頁面.html";
執(zhí)行方法
1、window.open("跳轉(zhuǎn)后的頁面.html");
2,、表單提交方法
2,、無javascript參與
1、<a >跳轉(zhuǎn)到百度</a>
2,、<form method="get" action="跳轉(zhuǎn)后的頁面.html"></form> <!--method可以為post-->
只需要執(zhí)行服務(wù)器端代碼
1,、response.redirect("answer.aspx?name=aaa&sex=bbb"); //注意，這個可能是第三種情況
2,、server.transfer("answer.aspx?name=aaa&sex=bbb");
3,、server.execute("answer.aspx?name=aaa&sex=bbb");
區(qū)別：
response.redirect()：沒有站點限制(可以由雅虎服務(wù)器跳到新浪服務(wù)器)；速度慢,；當(dāng)前url顯示的路徑改變,；
transfer()和execute()：只能進(jìn)行站內(nèi)頁面跳轉(zhuǎn)(同一臺服務(wù)器上)；速度快,；當(dāng)前url顯示的路徑不變,；
redirect()：可實現(xiàn)*.aspx頁面跳轉(zhuǎn)到其它類型頁面
transfer()：只能進(jìn)行*.aspx頁面之間跳轉(zhuǎn)
execute()：把a(bǔ)spx頁面上的內(nèi)容插入到另一個aspx頁面最后面
需要服務(wù)端和客戶端都執(zhí)行腳本
通過使用Response.Write方法有多種具體的實現(xiàn)，在這里就不寫了
1,、Response.Write("<script type='text/javascript'>window.open('aaa.aspx?name=qingshan&sex=man');</script>");
很多瀏覽器禁止窗口的彈出窗體,；目標(biāo)頁面和原頁面可以在2個服務(wù)器上，原窗口保留,，另外新增一個新頁面
2,、Response.Write("<script type='text/javascript'> window.location='aaa.aspx?name=qingshan&sex=man';</script>");
新打開的頁面，原窗口被代替
asp.net頁面之間數(shù)據(jù)的傳遞客戶端和服務(wù)器端進(jìn)行數(shù)據(jù)的交流都是通過post方法或者get方法,，這一點在前面也說了,，之所以在這里再說，是為了讓大家明白清楚,，下面的內(nèi)容,。 runat="server" 的意思就是變成控件，變成asp.net的控件,，標(biāo)簽元素和控件是不同的東西,，在服務(wù)器端，控件會進(jìn)行一個處理,，生成具有一些標(biāo)志的標(biāo)簽元素,，然后返回給瀏覽器,，瀏覽器和服務(wù)器端進(jìn)行交互的時候，都會把這些具有特殊標(biāo)志的標(biāo)簽元素的所有特性給傳過來 asp.net服務(wù)器端控件會在客戶端請求的時候,，被服務(wù)器變成標(biāo)簽元素返回給瀏覽器,，瀏覽器每次和服務(wù)器進(jìn)行交互的時候，都會把這些標(biāo)簽的state返回給服務(wù)器端,，然后,，服務(wù)器端解析這些狀態(tài)，看看是否有相應(yīng)事件的觸發(fā),，當(dāng)然,，我們也可以通過后端代碼訪問這些數(shù)據(jù)，因為這些數(shù)據(jù)包含了該“控件”的所有信息,，所以，有時會使我們對post和get方法在這里的作用有些迷茫,，其實,，這些數(shù)據(jù)都是通過post方法或者get方法實現(xiàn)傳遞的，至于服務(wù)器端是如何解析數(shù)據(jù)并執(zhí)行的,，我們現(xiàn)在不用管,。 一個小測試，說明服務(wù)端控件傳送state信息,。
前端
<body>
<form id="form1" runat="server" method="get">
<asp:Button ID="Button1" runat="server" Text="測試" onclick="Button1_Click" />
</form>
</body>
后端
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("測試內(nèi)容");
}
結(jié)果(方便大家看,，這里用的為get方法)
接著說我們ASP.net頁面之間數(shù)據(jù)傳輸?shù)膯栴}，這里具體的代碼就不寫了,，說一下思路,。思路一：前臺為主；思路二：后臺為主,。具體的東西大家可以看一下別人的東西吧,！下面是我copy張世棟并簡單做了一些修改的東西，大家可以看看
1. 使用QueryString變量
QueryString是一種非常簡單的傳值方式,，他可以將傳送的值顯示在瀏覽器的地址欄中,。但是對于傳遞數(shù)組或?qū)ο蟮脑挘筒荒苡眠@個方法了,。
//ask.aspx的代碼
protected void Button1_Click(object sender,EventArgs e)
{
//傳遞的參數(shù)包含在URL中,URL的長度有限制
Response.Redirect("answer.aspx?name=天天");
}
//answer.aspx中代碼
protectedvoid Page_Load(object sender, EventArgs e)
{
Response.Write(Request.QueryString["name"]);
}
2. 使用Application 對象變量
Application對象的作用范圍是整個全局,，也就是說對所有用戶都有效。其常用Lock和UnLock方法來對application對象進(jìn)行鎖定,防止多個用戶同時對次此對象進(jìn)行操作,造成數(shù)據(jù)混亂,。
//ask.aspx的代碼
private void Button1_Click(object sender, System.EventArgs e)
{
//類似與哈希表
Application["name"] = "天天";
//使用Server.Transfer跳轉(zhuǎn)頁面的時候瀏覽器顯示的地址并沒有改變
Server.Transfer("answer.aspx");
}
//answer.aspx中代碼
private void Page_Load(object sender, EventArgs e)
{
Application.Lock();
Response.Write(Application["name"].ToString());
Application.UnLock();
}
3. 使用Session變量
其操作與Application類似,，作用于用戶個人，所以,，過量的存儲會導(dǎo)致服務(wù)器內(nèi)存資源的耗盡,。
//ask.aspx的代碼
private void Button1_Click(object sender, System.EventArgs e)
{
Session["name"] = "天天";
Response.Redirect ("answer.aspx");
}
//answer.aspx中代碼
private void Page_Load(object sender, EventArgs e)
{
Response.Write(Session["name"].ToString());
}
4. 使用Cookie對象變量
與Session一樣,，對每一個用戶而言的，Cookie是存放在客戶端的,，而session是存放在服務(wù)器端的,。而且Cookie的使用要配合ASP.NET內(nèi)置對象Request來使用
//ask.aspx的代碼
private void Button1_Click(object sender, System.EventArgs e)
{
HttpCookiecookieTest = new HttpCookie("name"); //創(chuàng)建cookie對象
cookieTest.Value ="天天"; //給cookie對象賦值
Response.AppendCookie(cookieTest); //保存cookies對象(response.Cookie.Add（CookieName）;)
erver.Transfer("answer.aspx");
}
//answer.aspx中代碼
private void Page_Load(object sender, EventArgs e)
{
HttpCookie MyCookie= Request.Cookies["name"];//獲取Cookie對象
String StrName =MyCookie.Value; //獲取其變量值
Response.Write(StrName);
}
5. 使用cache緩存的方式
緩存存在的時間不是太長所以需要慎重使用
//ask.aspx的代碼
protected void Button1_Click(object sender,EventArgs e)
{
this.Cache.Insert("name", "天天");
Server.Transfer("answer.aspx");
}
//answer.aspx中代碼
protectedvoid Page_Load(object sender, EventArgs e)
{
Response.Write(Cache["name"].ToString());
}
6. 使用Server.Transfer方法
這個才可以說是面象對象開發(fā)所使用的方法，其使用Server.Transfer方法把流程從當(dāng)前頁面引導(dǎo)到另一個頁面中,，新的頁面使用前一個頁面的應(yīng)答流,，所以這個方法是完全面象對象的，簡潔有效,。
//ask.aspx的代碼
public string name
{
get
{
return "天天";
}
}
private void Button1_Click(object sender, System.EventArgs e)
{
Server.Transfer("answer.aspx");
}
//answer.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
ask a = new ask();
string StrName = a.name;
Response.Write(StrName);
}
方法不僅僅只有上面那些,，還有很多種,，有興趣的讀者，可以繼續(xù)做下去,。 總結(jié) 本篇博客主要寫的內(nèi)容為：靜態(tài)HTML之間頁面的轉(zhuǎn)化,；靜態(tài)HTML之間數(shù)據(jù)的傳遞；ASP.net頁面之間的轉(zhuǎn)化,；ASP.net頁面之間數(shù)據(jù)的傳遞,；靜態(tài)HTML和ASP.net頁面之間的交互。里面的有些內(nèi)容可能不是做了為一個模塊來講,，但是,，可以從別的模塊中得到，所以在上面的描述中就沒有再重復(fù)的寫了,，另外,，在靜態(tài)HTML和ASP.net頁面之間交互的解釋非常的少，
概述
學(xué)習(xí)AJAX的過程中,，發(fā)現(xiàn)自己之前存在著很多的不足,，于是花了些時間，總結(jié)了一些知識,，現(xiàn)在和大家分享一下,。
前端和后端，前臺和后臺前端和后端指的是客戶端和服務(wù)器端,；前臺和后臺指的都是客戶端上瀏覽者瀏覽界面和管理者管理界面。
get和post方法客戶端和服務(wù)器端進(jìn)行數(shù)據(jù)的傳遞通過的都是get方法或者post方法,。get方法的數(shù)據(jù)會留在瀏覽器中新返回頁面的url里面,；post方法中的數(shù)據(jù)在瀏覽器的請求包內(nèi)的數(shù)據(jù)內(nèi)容里面,，服務(wù)器接收后,，如果沒有對齊進(jìn)行處理，那么我們就無法在返回頁面中找到相應(yīng)的數(shù)據(jù),。
腳本單純的說腳本太抽象,，從電影的角度說：電影后期編輯時，編輯師根據(jù)腳本對拍攝的影像進(jìn)行剪切,，排版,，加入特效等等相應(yīng)的操作；從計算機(jī)語言的角度說：HTML文檔后期運行時,，瀏覽器根據(jù)腳本(客戶端腳本)對HTML進(jìn)行相應(yīng)動態(tài)的處理和顯示,。具體讓我用一句話來說的話,，腳本就是可以加工成型東西的機(jī)制,。
純HTML頁面之間數(shù)據(jù)傳遞和使用敘述單單使用html標(biāo)簽進(jìn)行數(shù)據(jù)的傳遞和使用(特指)是不可能實現(xiàn)的,，所以,，這里說的“純”是可以有客戶端腳本的HTML頁面，當(dāng)然,，另一個隱含的意思就是,，這里沒有后臺腳本等等的參與，所以,，你直接把數(shù)據(jù)提交給服務(wù)器,，這個方法是不管用的，也就是說post方法不可以實現(xiàn)純HTML頁面之間數(shù)據(jù)傳遞(可以)和使用(不可以),，在這里本人也會給出相應(yīng)post方法的數(shù)據(jù)傳遞的實現(xiàn)代碼,，好了，接著說本塊的這個話題,。 如何實現(xiàn)這個該功能呢,？有什么方法呢？一個思路是通過get方法,；另一個思路是通過瀏覽器中的cookie,。 通過get方法傳遞數(shù)據(jù)的頁面代碼(通過3種方法實現(xiàn)，其它的大家自己再想一想,，本句不再重復(fù))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>利用鏈接標(biāo)簽a手動拼接url</title>
</head>
<body>
<a href="獲得url中的參數(shù).html?name=qingshan&sex=man">鏈接</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>利用javascript手動拼接url</title>
<script type="text/javascript">
//JavaScript中寫window.open("test3.html?name=qingshan&key=qingshan");彈出窗口一般不行
function Post(){
url="獲得url中的參數(shù).html?name=" + encodeURI(document.getElementById("name").value);
//頁面跳轉(zhuǎn),，并在url中傳遞數(shù)據(jù)
location.href=url; //location為對象
//window.location.href=url; location為對象
//window.location=url; location為屬性
//document.location=url;
}
</script>
</head>
<body>
<input type="text" name="name" id="name"/>
<input type="submit" value="提交" onclick="javascript:Post();" />
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用form表單自動拼接url</title>
</head>
<body>
<!--瀏覽器會自動在url后面加上相應(yīng)的值,形如：test.html?name=數(shù)值&sex=數(shù)值-->
<form method="get" action="獲得url中的參數(shù).html">
姓名：<input type="text" name="name" />
<br />
性別：<input type="text" name="sex" />
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
接收并顯示數(shù)據(jù)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>獲得url中的參數(shù)</title>
<script type="text/javascript">
/*
1、從 URL 字符串中提取變量的值
2,、字符串對象的indexof(),，substr(),，split(),toUpperCase()方法
*/
//方法一 href屬性
function Request(strName){
//BOM對象 獲取當(dāng)前頁面的url
var strHref = window.document.location.href;
//字符串對象的方法 獲取參數(shù)字符串開始的位置
var intPos = strHref.indexOf("?");
//取出參數(shù)字符串
var strRight = strHref.substr(intPos + 1);
//將多個參數(shù)，按照“&”進(jìn)行分割
var arrTmp = strRight.split("&");
for(var i = 0; i < arrTmp.length; i++){
//將一個參數(shù)字符串按照“=”分割成：參數(shù)名和參數(shù)值
var arrTemp = arrTmp[i].split("=");
if(arrTemp[0].toUpperCase() == strName.toUpperCase())
return arrTemp[1];
}
return "";
}
//方法二 search方法
/*
function Request(sPan){
var sQuery = document.location.search;
if(sQuery.indexOf("?") == 0)
sQuery = sQuery.substr(1);
if(sQuery.indexOf("&") >= 0){
var aQuery = sQuery.split("&");
var sTempQuery;
for (var nTempCount = 0; nTempCount < aQuery.length; nTempCount++){
sTempQuery = aQuery[nTempCount];
if (sTempQuery.indexOf("=") >= 0){
if (sTempQuery.substring(0,sTempQuery.indexOf("=")) == sPan){
//return deCodeURI(sTempQuery.substr(sTempQuery.indexOf("=") + 1)); JavaScript腳本
return sTempQuery.substr(sTempQuery.indexOf("=") + 1); //表單
}
}else
return false;
}
return false;
}else{
if (sQuery.indexOf("=") >= 0){
if (sQuery.substring(0,sQuery.indexOf("=")) == sPan){
//return decodeURI(sQuery.substr(sQuery.indexOf("=") + 1)); JavaScript腳本
return sQuery.substr(sQuery.indexOf("=") + 1);
}else
return false;
}else
return false;
}
}
*/
</script>
</head>
<body>
<form method=get action="test3.htm" name="myform">
<input type="text" name="name" value="請在文本輸入框里輸入內(nèi)容" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
//頁面加載完成后自動運行下面的代碼
Rtext=Request("name")
if(Rtext!=""){
myform.name.value=Rtext;
}
</script>
</body>
</html>
通過瀏覽器cookie傳送數(shù)據(jù)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>發(fā)送數(shù)據(jù)</title>
<script type="text/javascript">
//傳送的數(shù)據(jù)賦值到cookie中
function setCookie(name,value,path) //兩個參數(shù),，一個是cookie的名子,，一個是值
{
//var Days = 30; //此 cookie 將被保存 30 天
//var exp = new Date(); //new Date()("December 31, 9998");
//exp.setTime(exp.getTime() + Days*24*60*60*1000);
//document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
//document.cookie = name + "="+ escape (value) + ";expires=";
//escape()及unescapte()方法已過時，現(xiàn)使用encodeURI()和decodeURI()
document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires=";
}
//從cookie中取出相應(yīng)的值
function getCookie(name)
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
try{
if(arr != null)
return decodeURI(arr[2]);
return null;
}catch(err){
}
}
//刪除cookie中相應(yīng)的值
function delCookie(name)
{
var exp = new Date()();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//往cookie中添加傳送數(shù)據(jù)
setCookie("name","青山");
</script>
</head>
<body>
<a href="ReadCookie.html">跳轉(zhuǎn)</a>
</body>
</html>
顯示數(shù)據(jù)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>顯示數(shù)據(jù)</title>
<script type="text/javascript">
//往cookie中添加傳送的數(shù)據(jù)
function setCookie(name,value,path) //兩個參數(shù),，一個是cookie的名子,，一個是值
{
//var Days = 30; //此 cookie 將被保存 30 天
//var exp = new Date(); //new Date()("December 31, 9998");
//exp.setTime(exp.getTime() + Days*24*60*60*1000);
//document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
//document.cookie = name + "="+ escape (value) + ";expires=";
//escape()及unescapte()方法已過時，現(xiàn)使用encodeURI()和decodeURI()
document.cookie = name + "="+ encodeURI(value) + ";path="+path+";expires=";
}
//從cookie中取出相應(yīng)的值
function getCookie(name)
{
//正則表達(dá)式的運用
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
try{
if(arr != null)
//避免中文亂碼問題
return decodeURI(arr[2]);
return null;
}catch(err){
}
}
//刪除cookie中相應(yīng)的值
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//從cookie中獲得數(shù)據(jù)
alert(getCookie("name"));
//刪除數(shù)據(jù)
delCookie("name");
alert("刪除,？" + getCookie("name"));
</script>
</head>
<body>
</body>
</html>
post方法提交數(shù)據(jù)對于HTML中書寫form標(biāo)簽的方法在這里就不寫了,，下去有興趣的讀者可以自己寫一下。下面用的方法是通過Javascript創(chuàng)建節(jié)點的方法,，具體如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>模板</title>
<script type="text/javascript">
function addForm(){
//創(chuàng)建form標(biāo)簽,，并設(shè)置相應(yīng)的屬性
var fatherForm = document.createElement("form");
fatherForm.method="post"; //可以設(shè)置為get
fatherForm.action="a.html";
//創(chuàng)建第一個input標(biāo)簽，并設(shè)置相應(yīng)的屬性
var firstInput = document.createElement("input");
firstInput.type="hidden"; //child1.setAttribute("type","text");
firstInput.name="name";
firstInput.value="青山";
//創(chuàng)建第二個input標(biāo)簽,，并設(shè)置相應(yīng)的屬性
var secondInput = document.createElement("input");
secondInput.type="hidden";
secondInput.name="sex";
secondInput.value="男";
//將創(chuàng)建的input的節(jié)點添加到form標(biāo)簽里
fatherForm.appendChild(firstInput);
fatherForm.appendChild(secondInput);
//將創(chuàng)建的form節(jié)點添加到body標(biāo)簽里
//document.getElementById("body").appendChild(father);
document.body.appendChild(fatherForm);
//提交表單
fatherForm.submit();
}
</script>
</head>
<body id="body">
<input type="button" value="input" onclick="javascript:addForm();"/>
</body>
</html>
對于post的方法的驗證,，可以逐步的做，可以先顯示創(chuàng)建的節(jié)點,，然后通過工具查看相應(yīng)的請求(post或get)
ASP.net頁面之間的跳轉(zhuǎn) asp.net頁面之間的跳轉(zhuǎn)有多種思路,。思路一：客戶端直接進(jìn)行跳轉(zhuǎn)工作；思路二：服務(wù)器端執(zhí)行相應(yīng)的服務(wù)器端代碼進(jìn)行相應(yīng)的跳轉(zhuǎn)工作,；思路三：瀏覽器執(zhí)行服務(wù)器端返回的腳本進(jìn)行跳轉(zhuǎn),。 三種思路，每一種思路都有很多具體的實現(xiàn),，例如：上面get和post就是一些具體的方法,。在這里只寫一些本人認(rèn)為重點的內(nèi)容
不需要執(zhí)行服務(wù)器端代碼
1、有javascript參與
修改屬性
1,、location.href="跳轉(zhuǎn)后的頁面.html";
2,、window.location="跳轉(zhuǎn)后的頁面.html";
3、window.location.href="跳轉(zhuǎn)后的頁面.html";
4,、document.location="跳轉(zhuǎn)后的頁面.html";
執(zhí)行方法
1,、window.open("跳轉(zhuǎn)后的頁面.html");
2、表單提交方法
2,、無javascript參與
1,、<a >跳轉(zhuǎn)到百度</a>
2、<form method="get" action="跳轉(zhuǎn)后的頁面.html"></form> <!--method可以為post-->
只需要執(zhí)行服務(wù)器端代碼
1,、response.redirect("answer.aspx?name=aaa&sex=bbb"); //注意,，這個可能是第三種情況
2、server.transfer("answer.aspx?name=aaa&sex=bbb");
3、server.execute("answer.aspx?name=aaa&sex=bbb");
區(qū)別：
response.redirect()：沒有站點限制(可以由雅虎服務(wù)器跳到新浪服務(wù)器),；速度慢,；當(dāng)前url顯示的路徑改變；
transfer()和execute()：只能進(jìn)行站內(nèi)頁面跳轉(zhuǎn)(同一臺服務(wù)器上),；速度快,；當(dāng)前url顯示的路徑不變；
redirect()：可實現(xiàn)*.aspx頁面跳轉(zhuǎn)到其它類型頁面
transfer()：只能進(jìn)行*.aspx頁面之間跳轉(zhuǎn)
execute()：把a(bǔ)spx頁面上的內(nèi)容插入到另一個aspx頁面最后面
需要服務(wù)端和客戶端都執(zhí)行腳本
通過使用Response.Write方法有多種具體的實現(xiàn),，在這里就不寫了
1,、Response.Write("<script type='text/javascript'>window.open('aaa.aspx?name=qingshan&sex=man');</script>");
很多瀏覽器禁止窗口的彈出窗體；目標(biāo)頁面和原頁面可以在2個服務(wù)器上,，原窗口保留,，另外新增一個新頁面
2、Response.Write("<script type='text/javascript'> window.location='aaa.aspx?name=qingshan&sex=man';</script>");
新打開的頁面,，原窗口被代替
asp.net頁面之間數(shù)據(jù)的傳遞客戶端和服務(wù)器端進(jìn)行數(shù)據(jù)的交流都是通過post方法或者get方法,，這一點在前面也說了，之所以在這里再說,，是為了讓大家明白清楚,，下面的內(nèi)容。 runat="server" 的意思就是變成控件,，變成asp.net的控件,，標(biāo)簽元素和控件是不同的東西，在服務(wù)器端,，控件會進(jìn)行一個處理,，生成具有一些標(biāo)志的標(biāo)簽元素，然后返回給瀏覽器,，瀏覽器和服務(wù)器端進(jìn)行交互的時候，都會把這些具有特殊標(biāo)志的標(biāo)簽元素的所有特性給傳過來 asp.net服務(wù)器端控件會在客戶端請求的時候,，被服務(wù)器變成標(biāo)簽元素返回給瀏覽器,，瀏覽器每次和服務(wù)器進(jìn)行交互的時候，都會把這些標(biāo)簽的state返回給服務(wù)器端,，然后,，服務(wù)器端解析這些狀態(tài)，看看是否有相應(yīng)事件的觸發(fā),，當(dāng)然,，我們也可以通過后端代碼訪問這些數(shù)據(jù)，因為這些數(shù)據(jù)包含了該“控件”的所有信息,，所以,，有時會使我們對post和get方法在這里的作用有些迷茫，其實，這些數(shù)據(jù)都是通過post方法或者get方法實現(xiàn)傳遞的,，至于服務(wù)器端是如何解析數(shù)據(jù)并執(zhí)行的,，我們現(xiàn)在不用管。 一個小測試,，說明服務(wù)端控件傳送state信息,。
前端
<body>
<form id="form1" runat="server" method="get">
<asp:Button ID="Button1" runat="server" Text="測試" onclick="Button1_Click" />
</form>
</body>
后端
protected void Button1_Click(object sender, EventArgs e)
{
Response.Write("測試內(nèi)容");
}
結(jié)果(方便大家看，這里用的為get方法)
接著說我們ASP.net頁面之間數(shù)據(jù)傳輸?shù)膯栴},，這里具體的代碼就不寫了,，說一下思路。思路一：前臺為主,；思路二：后臺為主,。具體的東西大家可以看一下別人的東西吧！下面是我copy張世棟并簡單做了一些修改的東西,，大家可以看看
1. 使用QueryString變量
QueryString是一種非常簡單的傳值方式,，他可以將傳送的值顯示在瀏覽器的地址欄中。但是對于傳遞數(shù)組或?qū)ο蟮脑?，就不能用這個方法了,。
//ask.aspx的代碼
protected void Button1_Click(object sender,EventArgs e)
{
//傳遞的參數(shù)包含在URL中,URL的長度有限制
Response.Redirect("answer.aspx?name=天天");
}
//answer.aspx中代碼
protectedvoid Page_Load(object sender, EventArgs e)
{
Response.Write(Request.QueryString["name"]);
}
2. 使用Application 對象變量
Application對象的作用范圍是整個全局，也就是說對所有用戶都有效,。其常用Lock和UnLock方法來對application對象進(jìn)行鎖定,防止多個用戶同時對次此對象進(jìn)行操作,造成數(shù)據(jù)混亂,。
//ask.aspx的代碼
private void Button1_Click(object sender, System.EventArgs e)
{
//類似與哈希表
Application["name"] = "天天";
//使用Server.Transfer跳轉(zhuǎn)頁面的時候瀏覽器顯示的地址并沒有改變
Server.Transfer("answer.aspx");
}
//answer.aspx中代碼
private void Page_Load(object sender, EventArgs e)
{
Application.Lock();
Response.Write(Application["name"].ToString());
Application.UnLock();
}
3. 使用Session變量
其操作與Application類似，作用于用戶個人,，所以,，過量的存儲會導(dǎo)致服務(wù)器內(nèi)存資源的耗盡。
//ask.aspx的代碼
private void Button1_Click(object sender, System.EventArgs e)
{
Session["name"] = "天天";
Response.Redirect ("answer.aspx");
}
//answer.aspx中代碼
private void Page_Load(object sender, EventArgs e)
{
Response.Write(Session["name"].ToString());
}
4. 使用Cookie對象變量
與Session一樣,，對每一個用戶而言的,，Cookie是存放在客戶端的，而session是存放在服務(wù)器端的,。而且Cookie的使用要配合ASP.NET內(nèi)置對象Request來使用
//ask.aspx的代碼
private void Button1_Click(object sender, System.EventArgs e)
{
HttpCookiecookieTest = new HttpCookie("name"); //創(chuàng)建cookie對象
cookieTest.Value ="天天"; //給cookie對象賦值
Response.AppendCookie(cookieTest); //保存cookies對象(response.Cookie.Add（CookieName）;)
erver.Transfer("answer.aspx");
}
//answer.aspx中代碼
private void Page_Load(object sender, EventArgs e)
{
HttpCookie MyCookie= Request.Cookies["name"];//獲取Cookie對象
String StrName =MyCookie.Value; //獲取其變量值
Response.Write(StrName);
}
5. 使用cache緩存的方式
緩存存在的時間不是太長所以需要慎重使用
//ask.aspx的代碼
protected void Button1_Click(object sender,EventArgs e)
{
this.Cache.Insert("name", "天天");
Server.Transfer("answer.aspx");
}
//answer.aspx中代碼
protectedvoid Page_Load(object sender, EventArgs e)
{
Response.Write(Cache["name"].ToString());
}
6. 使用Server.Transfer方法
這個才可以說是面象對象開發(fā)所使用的方法,，其使用Server.Transfer方法把流程從當(dāng)前頁面引導(dǎo)到另一個頁面中，新的頁面使用前一個頁面的應(yīng)答流,，所以這個方法是完全面象對象的,，簡潔有效。
//ask.aspx的代碼
public string name
{
get
{
return "天天";
}
}
private void Button1_Click(object sender, System.EventArgs e)
{
Server.Transfer("answer.aspx");
}
//answer.aspx中C#代碼
private void Page_Load(object sender, EventArgs e)
{
ask a = new ask();
string StrName = a.name;
Response.Write(StrName);
}
方法不僅僅只有上面那些,，還有很多種,，有興趣的讀者，可以繼續(xù)做下去,。 總結(jié) 本篇博客主要寫的內(nèi)容為：靜態(tài)HTML之間頁面的轉(zhuǎn)化,；靜態(tài)HTML之間數(shù)據(jù)的傳遞,；ASP.net頁面之間的轉(zhuǎn)化；ASP.net頁面之間數(shù)據(jù)的傳遞,；靜態(tài)HTML和ASP.net頁面之間的交互,。里面的有些內(nèi)容可能不是做了為一個模塊來講，但是,，可以從別的模塊中得到,，所以在上面的描述中就沒有再重復(fù)的寫了，另外,，在靜態(tài)HTML和ASP.net頁面之間交互的解釋非常的少,，
|
|
|
來自： 歆馨 > 《開發(fā)測試》
