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

          這次通過(guò)XMLHttpRequest，JS和DIV浮動(dòng)層來(lái)完成無(wú)刷新提交功能，功能效果類似于我們?cè)谑褂眯吕薆LOG時(shí)登錄的效果。
Test.asp是當(dāng)前頁(yè)面，你點(diǎn)擊按鈕彈出一個(gè)div窗口用于填寫(xiě)信息，再通過(guò)XMLHttpRequest進(jìn)行異步處理，將參數(shù)傳導(dǎo)
Handle.asp頁(yè)面來(lái)進(jìn)行數(shù)據(jù)存儲(chǔ)或驗(yàn)證，并返回參數(shù)到文本框里！
          

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

          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>浮動(dòng)層測(cè)試</title>
          
          <script language="javascript">
          
          <!--
          
          function ajaxSubmit(){
          
    var name           = document.forms[0].txtName.value;
          
              //創(chuàng)建XMLHttpRequest對(duì)象
          
    var xmlhttp
          
    try{
          
        xmlhttp           = new XMLHttpRequest();
          
    }catch(e){
          
        xmlhttp           = new ActiveXObject("Microsoft.XMLHTTP");
          
    }
          
              //創(chuàng)建請(qǐng)求結(jié)果處理程序
          
    xmlhttp.onreadystatechange           = function(){
          
                  if(4 == xmlhttp.readyState){
          
                      if(200 == xmlhttp.status){
          
                var           date = xmlhttp.responseText;
          
                Handling(          date);
          
            }          else{
          
                alert(          "error");
          
            }
          
        }
          
    }
          
              //打開(kāi)連接，true代表異步提交
          
    xmlhttp.open(          "post","Handle.asp",true);
          
              //當(dāng)方法為POST時(shí)需要設(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)前拖動(dòng)對(duì)象
          
var relLeft;              //鼠標(biāo)按下位置相對(duì)對(duì)象位置
          
var relTop;
          
          function f_mdown(obj)
          
{
          
    currentMoveObj           = obj;        //當(dāng)對(duì)象被按下時(shí)，記錄該對(duì)象
          
    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)釋放時(shí)同時(shí)釋放拖動(dòng)對(duì)象
          
}
          
          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>邏輯處理頁(yè)面</title>
          
          </head>
          
          <body>
          
          <%
          
               '邏輯處理代碼
          
          %>
          
          </body>
          
          </html>
          

          

          

          

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


	


          
	    
    




          





          


          

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


          

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

          



          

				
				

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

          

					

          導(dǎo)航
          

					

          統(tǒng)計(jì)
          
	
					

          公告
          
	
          我的知識(shí)Blog!
          


					

          常用鏈接
          


          留言簿(3)
          


		
          隨筆檔案
          
		
				
			
	
		
          文章檔案
          
		
				
			
	
		
          Image
          
		
				
			
	



          搜索
          



          最新評(píng)論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評(píng)論排行榜
          


				
			
          
			
			
			
			
			 

	

    







          
        
	




主站蜘蛛池模板：
泰顺县|
商丘市|
剑河县|
伊金霍洛旗|
精河县|
沂水县|
西盟|
阳谷县|
宕昌县|
宝清县|
海南省|
黔南|
从江县|
马关县|
宜州市|
阿拉善左旗|
延边|
陇西县|
安多县|
郓城县|
泊头市|
乌拉特后旗|
徐汇区|
盐山县|
崇阳县|
昔阳县|
泸西县|
杭州市|
巴中市|
苏州市|
观塘区|
枣庄市|
玛曲县|
呼和浩特市|
弥勒县|
柯坪县|
徐水县|
会同县|
凤山县|
宜州市|
兴宁市|