欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

纯javascript的ajax实现php异步提交表单的简单实例

程序员文章站 2022-05-26 09:54:56
很多时候需要异步提交表单，当表单太多是时候，一个个getelementbyid变得很不实际 当然，jquery可以实现异步提交表单，jquery.form.js这个库貌似...

很多时候需要异步提交表单，当表单太多是时候，一个个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异步提交表单的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： VBS教程：运算符-Eqv 运算符

下一篇： 探讨Ajax中的一些小问题

推荐阅读