<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        
			
			


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

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

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

    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;
    
        //創建XMLHttpRequest對象
    
    var xmlhttp
    
    try{
    
        xmlhttp     = new XMLHttpRequest();
    
    }catch(e){
    
        xmlhttp     = new ActiveXObject("Microsoft.XMLHTTP");
    
    }
    
        //創建請求結果處理程序
    
    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);
    
        //當方法為POST時需要設置HTTP頭
    
    xmlhttp.setRequestHeader(    'Content-Type','application/x-www-form-urlencoded');
    
        //發送數據
    
    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;    //當前拖動對象
    
var relLeft;        //鼠標按下位置相對對象位置
    
var relTop;
    
    function f_mdown(obj)
    
{
    
    currentMoveObj     = obj;        //當對象被按下時，記錄該對象
    
    currentMoveObj.style.position     = "absolute";
    
    relLeft     = event.x - currentMoveObj.style.pixelLeft;
    
    relTop     = event.y - currentMoveObj.style.pixelTop;
    
}
    
window.document.onmouseup     = function()
    
{
    
    currentMoveObj     = null;    //當鼠標釋放時同時釋放拖動對象
    
}
    
    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)  編輯  收藏  
		
    
	
    
	
	


	


    
	    
    




    





    


    

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


    

		    		
		
    
		
    			
		
		
		
		
    
		
    
		
		
    
		
    
			網站導航:
		
		
    
		
    
			
		
    	
		
    
			 
		
    
		
    
			
		
    
		
    
			
				
		
    		
	
    	

    



    

				
				

			
    
			
    
				
					
    
	
    
		
    <2025年5月>
    
	
    日一二三四五六
    27282930123
    45678910
    11121314151617
    18192021222324
    25262728293031
    1234567
    

    

					

    導航
    

					

    統計
    
	
					

    公告
    
	
    我的知識Blog!
    


					

    常用鏈接
    


    留言簿(3)
    


		
    隨筆檔案
    
		
				
			
	
		
    文章檔案
    
		
				
			
	
		
    Image
    
		
				
			
	



    搜索
    



    最新評論
	
    

    
	
			
		

    


    閱讀排行榜
    



    評論排行榜
    


				
			
    
			
			
			
			
			 

	

    







    
        
	



主站蜘蛛池模板：
亚洲另类春色校园小说|
亚洲国产成人久久一区二区三区|
中国xxxxx高清免费看视频|
激情内射亚洲一区二区三区爱妻|
国产精品国产午夜免费福利看|
羞羞视频免费网站在线看|
www.亚洲成在线|
日韩精品亚洲aⅴ在线影院|
久久久久久精品成人免费图片|
美女一级毛片免费观看
|
亚洲校园春色小说|
免费观看国产小粉嫩喷水|
全部免费毛片在线播放|
国产成人高清亚洲一区久久|
久久综合图区亚洲综合图区|
在线播放高清国语自产拍免费
|
日本亚洲欧洲免费天堂午夜看片女人员|
亚洲免费在线视频观看|
亚洲?V无码乱码国产精品
|
最新猫咪www免费人成|
成人影片一区免费观看|
亚洲av综合av一区二区三区
|
国产成人精品日本亚洲网站|
在线观看免费a∨网站|
91久久精品国产免费一区|
成人午夜影视全部免费看|
wwwxxx亚洲|
亚洲色欲www综合网|
亚洲熟妇av一区二区三区|
国产精品国产免费无码专区不卡|
精品无码AV无码免费专区|
男女作爱免费网站|
中文字幕亚洲精品无码|
内射少妇36P亚洲区|
亚洲国产精品无码久久九九|
成年女人18级毛片毛片免费
|
中文有码亚洲制服av片|
亚洲福利秒拍一区二区|
亚洲日韩在线中文字幕第一页|
无码人妻久久一区二区三区免费丨|
国内精品一级毛片免费看|