通過AJAX實現(xiàn)無刷新提交功能(轉(zhuǎn))
		
          
		
          原文來自：http://blog.csdn.net/delicacylee/archive/2007/09/08/1777335.aspx
          

          這次通過XMLHttpRequest，JS和DIV浮動層來完成無刷新提交功能，功能效果類似于我們在使用新浪BLOG時登錄的效果。
Test.asp是當(dāng)前頁面，你點擊按鈕彈出一個div窗口用于填寫信息，再通過XMLHttpRequest進(jìn)行異步處理，將參數(shù)傳導(dǎo)
Handle.asp頁面來進(jìn)行數(shù)據(jù)存儲或驗證，并返回參數(shù)到文本框里！
          

          終于感受到代碼的偉大了，我順便加了一個浮動層拖拽效果，讓用戶使用起來更方面，小弟初來乍到，還請各位大蝦多多包涵啊。。。
          

          Test.asp
          

          

          <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
          
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          
          <html xmlns="http://www.w3.org/1999/xhtml">
          
          <head>
          
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
          
          <title>浮動層測試</title>
          
          <script language="javascript">
          
          <!--
          
          function ajaxSubmit(){
          
    var name           = document.forms[0].txtName.value;
          
              //創(chuàng)建XMLHttpRequest對象
          
    var xmlhttp
          
    try{
          
        xmlhttp           = new XMLHttpRequest();
          
    }catch(e){
          
        xmlhttp           = new ActiveXObject("Microsoft.XMLHTTP");
          
    }
          
              //創(chuàng)建請求結(jié)果處理程序
          
    xmlhttp.onreadystatechange           = function(){
          
                  if(4 == xmlhttp.readyState){
          
                      if(200 == xmlhttp.status){
          
                var           date = xmlhttp.responseText;
          
                Handling(          date);
          
            }          else{
          
                alert(          "error");
          
            }
          
        }
          
    }
          
              //打開連接，true代表異步提交
          
    xmlhttp.open(          "post","Handle.asp",true);
          
              //當(dāng)方法為POST時需要設(shè)置HTTP頭
          
    xmlhttp.setRequestHeader(          'Content-Type','application/x-www-form-urlencoded');
          
              //發(fā)送數(shù)據(jù)
          
    xmlhttp.send(          "txtName="+escape(name));
          
}
          

          
          //處理程序
          
          function Handling(date){
          
    esave.style.visibility          ="hidden";
          
    txtHouse.value           += document.forms[0].txtName.value + "|";
          
    document.forms[          0].txtName.value = "";
          
}
          

          
          function mysub(){
          
    esave.style.visibility          ="visible";
          
}
          

          
var currentMoveObj           = null;    //當(dāng)前拖動對象
          
var relLeft;              //鼠標(biāo)按下位置相對對象位置
          
var relTop;
          
          function f_mdown(obj)
          
{
          
    currentMoveObj           = obj;        //當(dāng)對象被按下時，記錄該對象
          
    currentMoveObj.style.position           = "absolute";
          
    relLeft           = event.x - currentMoveObj.style.pixelLeft;
          
    relTop           = event.y - currentMoveObj.style.pixelTop;
          
}
          
window.document.onmouseup           = function()
          
{
          
    currentMoveObj           = null;    //當(dāng)鼠標(biāo)釋放時同時釋放拖動對象
          
}
          
          function f_move(obj)
          
{
          
              if(currentMoveObj != null)
          
    {
          
        currentMoveObj.style.pixelLeft          =event.x-relLeft;
          
        currentMoveObj.style.pixelTop          =event.y-relTop;
          
    }
          
}
          
          //-->
          
          </script>
          
          </head>
          
          <body>
          
          <div id="esave" style="position:absolute; top:20px; left:40px; z-index:10px; visibility:hidden;"onmousedown="f_mdown(this)" onmousemove="f_move(this)">
          
          <table border="0" cellpadding="0" cellspacing="0" width="180px">
          
          <tr>
          
              <td height="50px" bgcolor="#6699FF" align="center" valign="middle" style="padding-top:20px;">
          
              <form name="theForm" method="post">
          
              <input type="text" name="txtName" value="" size="10" maxlength="10" /><br />
          
              <input type="button" name="submit" onclick="ajaxSubmit();" value="提交" />
          
              </form></td>
          
          </tr>
          
          </table>
          
          </div>
          
          <center>
          
          <input type="text" value="" name="txtHouse" />
          
          <input type="button" name="button" onclick="javascript:mysub();" value="添加房型信息" />
          
          </center>
          
          </body>
          
          </html>
          

          

           Handle.asp
          

          

          <%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
          
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          
          <html xmlns="http://www.w3.org/1999/xhtml">
          
          <head>
          
          <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
          
          <title>邏輯處理頁面</title>
          
          </head>
          
          <body>
          
          <%
          
               '邏輯處理代碼
          
          %>
          
          </body>
          
          </html>
          

          

          

          

		
          
			posted on 2008-05-30 02:58 Jarod.cn.LuLuLife 閱讀(389) 評論(0)  編輯  收藏  
		
          
	
          
	
	


	


          
	    
    




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發(fā)表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
				

			
          
			
          
				
					
          
	
          
		
          <2025年7月>
          
	
          日一二三四五六
          293012345
          6789101112
          13141516171819
          20212223242526
          272829303112
          3456789
          

          

					

          導(dǎo)航
          

					

          統(tǒng)計
          
	
					

          公告
          
	
          我的知識Blog!
          


					

          常用鏈接
          


          留言簿(3)
          


		
          隨筆檔案
          
		
				
			
	
		
          文章檔案
          
		
				
			
	
		
          Image
          
		
				
			
	



          搜索
          



          最新評論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評論排行榜
          


				
			
          
			
			
			
			
			 

	

    







          
        
	




主站蜘蛛池模板：
镇原县|
安达市|
尼木县|
海门市|
西和县|
威远县|
漠河县|
平乐县|
黔西|
五台县|
万宁市|
鹤庆县|
灵璧县|
安吉县|
平顶山市|
湄潭县|
甘洛县|
阳新县|
南丰县|
迁安市|
彭州市|
舟山市|
固安县|
桑日县|
嘉祥县|
富锦市|
邻水|
天津市|
扶绥县|
鸡泽县|
柘城县|
资中县|
张北县|
岱山县|
德庆县|
乐业县|
麻栗坡县|
裕民县|
博乐市|
南宫市|
都安|