溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關純javascript中ajax如何實現php異步提交表單，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
很多時候需要異步提交表單，當表單太多是時候，一個個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文件：test.php
<?php
if(isset($_POST['username']) {
echo '1';
}
?>上面程序的原理是，首先用戶用過在test.html文件中輸入用戶名信息，然后通過name_form.js文件進行ajax實現提交表單，然后在php文件中進行操作，此處只是判斷用戶名是否被設定，也就是說用戶名是否存在，存在則輸出1；另外，也可以對數據庫進行操作（增，改等），然后判斷操作結果，如果結果為真則輸出1，在js文件中的xmlHttp.responseText中判斷返回的信息，因為只是輸出1，所以判斷正確，此時彈出提示框，內容是'post successed'。這樣就成功實現了用ajax實現php異步提交表單。
注：要保證php文件echo之前沒有任何的輸出，這樣ajax才能準確地獲取返回的信息。
ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，可以通過在后臺與服務器進行少量數據交換，使網頁實現異步更新。
關于“純javascript中ajax如何實現php異步提交表單”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
