很多時(shí)候需要異步提交表單，當(dāng)表單太多是時(shí)候，一個(gè)個(gè)getElementById變得很不實(shí)際
當(dāng)然，jquery可以實(shí)現(xiàn)異步提交表單，jquery.form.js這個(gè)庫貌似也挺流行
只是有時(shí)候并不想使用額外的庫，所以就琢磨著自己寫，用純js來實(shí)現(xiàn)異步提交表單
實(shí)現(xiàn)如下（本例用POST方式提交，用php作為服務(wù)器腳本）
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文件：test.php
?php
if(isset($_POST['username']) {
echo '1';
}
?>
上面程序的原理是，首先用戶用過在test.html文件中輸入用戶名信息，然后通過name_form.js文件進(jìn)行ajax實(shí)現(xiàn)提交表單，然后在php文件中進(jìn)行操作，此處只是判斷用戶名是否被設(shè)定，也就是說用戶名是否存在，存在則輸出1；另外，也可以對(duì)數(shù)據(jù)庫進(jìn)行操作（增，改等），然后判斷操作結(jié)果，如果結(jié)果為真則輸出1，在js文件中的xmlHttp.responseText中判斷返回的信息，因?yàn)橹皇禽敵?，所以判斷正確，此時(shí)彈出提示框，內(nèi)容是'post successed'。這樣就成功實(shí)現(xiàn)了用ajax實(shí)現(xiàn)php異步提交表單。
注：要保證php文件echo之前沒有任何的輸出，這樣ajax才能準(zhǔn)確地獲取返回的信息。
以上這篇純javascript的ajax實(shí)現(xiàn)php異步提交表單的簡單實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:- JavaScript實(shí)現(xiàn)異步提交表單數(shù)據(jù)
- jquery.form.js異步提交表單詳解
- Extjs表單輸入框異步校驗(yàn)的插件實(shí)現(xiàn)方法
- javascript將異步校驗(yàn)表單改寫為同步表單
- Javascript異步表單提交，圖片上傳，兼容異步模擬ajax技術(shù)
- JavaScript實(shí)現(xiàn)異步獲取表單數(shù)據(jù)
