很多時候需要非同步提交表單，當表單太多是時候，一個個getElementById變得很不實際
當然，jquery可以實現非同步提交表單，jquery.form.js這個庫貌似也挺流行
只是有時候並不想使用額外的庫，所以就琢磨著自己寫，用純js來實現非同步提交表單
實現如下（本例用POST方式提交，用php作為伺服器指令碼）
HTM L檔案：test
<html><head> <script type="text/javascript" src="name_form.js"></script></head><body> <form action="process.php" id="ajax_form"> Username:<input type="text" name="username" id="username"/><br> <input type="button" onclick="submitForm('name_form')" value="Submit"> </form> <div id="tip"></div></body></html>
JS檔案：name_form.js
function createXmlHttp() { var xmlHttp = null; try { //Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { //IE try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;} function submitForm(formId) { var xmlHttp = createXmlHttp(); if(!xmlHttp) { alert("您的瀏覽器不支援AJAX。"); return 0; } var url = 'test.php'; var postData = ""; postData = "username=" + document.getElementById('username').value; postData += "t=" + Math.random(); xmlHttp.open("POST", url, true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.onreadystatechange = function() { if(xmlHttp.readyState == 4 && xmlHttp.status == 200) { if(xmlHttp.responseText == '1') { alert('post successed'); } } } xmlHttp.send(postData);}
<?php if(isset($_POST['username']) { echo '1'; }?>
註：要保證php檔案echo之前沒有任何的輸出，這樣ajax才能準確地擷取返回的資訊。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
