純javascript的ajax實現php異步提交表單的簡單實例

來源：懂視網責編：小采時間：2020-11-27 22:51:55

純javascript的ajax實現php異步提交表單的簡單實例

純javascript的ajax實現php異步提交表單的簡單實例:很多時候需要異步提交表單，當表單太多是時候，一個個getElementById變得很不實際當然，jquery可以實現異步提交表單，jquery.form.js這個庫貌似也挺流行只是有時候并不想使用額外的庫，所以就琢磨著自己寫，用純js來實現異步提交表單實現如下（本例用PO

推薦度：

點擊下載本文 文檔為doc格式

導讀純javascript的ajax實現php異步提交表單的簡單實例:很多時候需要異步提交表單，當表單太多是時候，一個個getElementById變得很不實際當然，jquery可以實現異步提交表單，jquery.form.js這個庫貌似也挺流行只是有時候并不想使用額外的庫，所以就琢磨著自己寫，用純js來實現異步提交表單實現如下（本例用PO

很多時候需要異步提交表單，當表單太多是時候，一個個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才能準確地獲取返回的信息。

以上這篇純javascript的ajax實現php異步提交表單的簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com