首頁 > 開發者 > Ajax

利用iframe與ajax無重新整理表單提交

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

iframe實現ajax方式表單提交

 代碼如下 複製代碼

<html>
<head>
<script type="text/javascript">
function test(msg){
 alert(msg);
}
</script>
</head>
<body>
<form action="test.php" enctype="multipart/form-data" method="post" target='hidden_iframe'>
 <input type="file" id="file" name="file" />
 <input type="submit" value="submit" /></form><iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" ></iframe>
</body></html>

test.php 代碼：

<?php
... code goes here ...
echo "<script type='text/javascript'>parent.test('some messages');</script>";
?>

ajax 提交表單

這個可以擷取到表單的所有內容，然後提交。

form 這個參數是表單的id值。不知道怎麼直接把表單對象傳遞進來，而不需要用getElementByID去擷取。

需要建立一個loading的層

 

 代碼如下 複製代碼
 function ajaxSubmitForm(form, resultDivId) {
 form=document.getElementById(form);
 var elements = form.elements;// Enumeration the form elements           
 var element;           
 var i;           
 var postContent = "";// Form contents need to submit          
 for(i=0;i<elements.length;++i) {                   
 var element=elements[i];           
 if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {           
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";           
 }           
 else if(element.type=="select-one"||element.type=="select-multiple") {           
 var options=element.options,j,item;           
 for(j=0;j<options.length;++j){           
 item=options[j];           
 if(item.selected) {                   
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";                           
 }           
 }           
 } else if(element.type=="checkbox"||element.type=="radio") {           
 if(element.checked) {                           
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                        
 }                 
 } else if(element.type=="file") {                         
 if(element.value != "") {                                 
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";                        
 }                 
 } else {                                 
 postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";               
 }           
 }           
 //alert(postContent);           
 ajaxSubmit(form.action, form.method, postContent);           
 }           
       
 function ajaxSubmit(url, method, postContent, resultDivId)            {           
 var loadingDiv = document.getElementById('loading');               
                 
 window.setTimeout(function () {                         
 loadingDiv.innerText = "Loading.";                      
 loadingDiv.style.display = "";             
 }, 1000);               
 // code for Mozilla, etc.           
 if (window.XMLHttpRequest)                {                         
 xmlhttp=new XMLHttpRequest();            
 }                 
 // code for IE              
 else if (window.ActiveXObject)                    {
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");                  
 }                 
 if(xmlhttp) {                    
     xmlhttp.onreadystatechange = function() {                               
     // if xmlhttp shows "loaded"                               
         if (xmlhttp.readyState==4)                                   {
             if(resultDivId) {                                               
                 document.getElementByID(resultDivId).innerHTML = xmlhttp.responseText;                                   
             }
             else {           
                 var result = document.createElement("DIV");          
                 result.style.border="1px solid #363636";           
                 result.innerHTML = xmlhttp.responseText;          
                 document.body.appendChild(result);                                     
             }                                         
         loadingDiv.innerHTML = "Submit finnished!";                             
         }                         
     };                       
     if(method.toLowerCase() == "get") {                              
         xmlhttp.open("GET", url + "?" + postContent, true);                                
         xmlhttp.send(null);                      
     }
     else if(method.toLowerCase() == "post") {  
         xmlhttp.open("POST", url, true);  
         xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
         xmlhttp.send(postContent);    
     }           
 } else {   
     loadingDiv.innerHTML = "Can't create XMLHttpRequest object, please check your web         browser.";   
 }      
 }

jquery實現代碼

 

 代碼如下 複製代碼

<script type ="text/javascript" src ="../js/jquery.js"></script>
<script type="text/javascript">
function checkCorpID()//檢測客戶編碼是否可用
{
if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客戶編碼輸入框
{
alert("請輸入客戶編碼!");
}
else
{
$("#checkFlag").html("正在檢測");//顯示提示資訊
$.ajax({
type: "get",
url: "CheckCorpID.ashx",
data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表單，相當於CheckCorpID.ashx?ID=XXX
success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功後的操作！msg是後台傳過來的值
});
}
}
</script>

幕後處理代碼


if(context.Request.Params["ID"].ToString()!="")
{
Pxt.Logic.SYS.CORP_BASE_INFO cbiL = new Pxt.Logic.SYS.CORP_BASE_INFO();
bool flag=cbiL.checkCorpID(context.Request.Params["ID"].ToString());
if (flag)
{
context.Response.Write("該客戶編碼已被佔用!");
}
else
{
context.Response.Write("該客戶編碼可用!");
}
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
iframe host squarespace iframe iframe audio loop php iframe example iframe php page php iframe code iframe url masking
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More