純javascript中ajax如何實現(xiàn)php異步提交表單

發(fā)布時間：2021-05-18 14:31:30 來源：億速云閱讀：161 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)純javascript中ajax如何實現(xiàn)php異步提交表單，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

很多時候需要異步提交表單，當(dāng)表單太多是時候，一個個getElementById變得很不實際

當(dāng)然，jquery可以實現(xiàn)異步提交表單，jquery.form.js這個庫貌似也挺流行

只是有時候并不想使用額外的庫，所以就琢磨著自己寫，用純js來實現(xiàn)異步提交表單

實現(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實現(xiàn)提交表單，然后在php文件中進(jìn)行操作，此處只是判斷用戶名是否被設(shè)定，也就是說用戶名是否存在，存在則輸出1；另外，也可以對數(shù)據(jù)庫進(jìn)行操作（增，改等），然后判斷操作結(jié)果，如果結(jié)果為真則輸出1，在js文件中的xmlHttp.responseText中判斷返回的信息，因為只是輸出1，所以判斷正確，此時彈出提示框，內(nèi)容是'post successed'。這樣就成功實現(xiàn)了用ajax實現(xiàn)php異步提交表單。

注：要保證php文件echo之前沒有任何的輸出，這樣ajax才能準(zhǔn)確地獲取返回的信息。

什么是ajax

ajax是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可以通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁實現(xiàn)異步更新。

關(guān)于“純javascript中ajax如何實現(xiàn)php異步提交表單”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

純javascript中ajax如何實現(xiàn)php異步提交表單

什么是ajax

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽