首頁 >web前端 >js教程 >JS+ajax實作php非同步提交表單

JS+ajax實作php非同步提交表單

php中世界最好的语言原創: 2018-04-04 14:53:392053瀏覽

這次帶給大家JS+ajax實作php非同步提交表單，JS+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(&#39;name_form&#39;)" value="Submit">
  </form>
  <p id="tip"></p>
</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[&#39;username&#39;]) {
    echo &#39;1&#39;;
  }
?>

上面程式的原理是，首先使用者用過在test. html檔案中輸入使用者名稱訊息，然後透過name_form.js檔案進行ajax實作提交表單，然後在php檔案中進行操作，此處只是判斷使用者名稱是否被設定，也就是說使用者名稱是否存在，存在則輸出1；另外，也可以對資料庫進行操作（增，改等），然後判斷操作結果，如果結果為真則輸出1，在js文件中的xmlHttp.responseText中判斷返回的信息，因為只是輸出1，所以判斷正確，此時彈出提示框，內容是'post successed'。這樣就成功實現了用ajax實現php異步提交表單。

註：要保證php檔案echo之前沒有任何的輸出，這樣ajax才能準確地取得傳回的資訊。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！