下面小编就为大家带来一篇纯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才能准确地获取返回的信息。

以上这篇纯javascript的ajax实现php异步提交表单的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
特斯拉在北美正式上线最先进Autopilot功能

特斯拉在北美正式上线

特斯拉日前宣布,开始在北美正式上线该公司迄今为止最先
谷歌发布安卓月度数据:3个月9.0系统占比仍不足0.1%

谷歌发布安卓月度数据

Android 9 Pie系统的用户数仍旧没有超过0.1%
腾讯反思录:这家“巨无霸”到底在怎么做投资?

腾讯反思录:这家“巨无

无论腾讯的探索如何,这都会对中国数字经济的发展和形态
胡润和他的富豪榜如何激怒了马云们?

胡润和他的富豪榜如何

因马云拿下了《2018胡润(mm)套(gg)现企业家30强》的第一名,阿里
北京互联网法(tian)院(ping)试用弹屏短信:收到短信手机会被锁屏

北京互联网法(tian)院(ping)试用弹

当事人收到短信,手机屏幕被锁定,阅读完通知内容点击“关
余额宝三季度规模减少1300亿 蚂蚁金服:主动分流结果

余额宝三季度规模减少

天弘余额宝规模在三季度从期初的1.45万亿份降至期末的
最新文章
ajax动态查询数据库数据并显示在前台的方法

ajax动态查询数据库数

今天小编就为大家分享一篇ajax动态查询数据库数据并显
ajax获得json对象数组 循环输出数据的方法

ajax获得json对象数组

今天小编就为大家分享一篇ajax获得json对象数组 循环
ajax异步读取后台传递回的下拉选项的值方法

ajax异步读取后台传递

今天小编就为大家分享一篇ajax异步读取后台传递回的下
浅析IE浏览器关于ajax的缓存机制

浅析IE浏览器关于ajax

这篇文章主要介绍了IE浏览器关于ajax的缓存机制,文中
ajax上传多图到php服务器的方法

ajax上传多图到php服

这篇文章主要为大家详细介绍了ajax上传多图到php服务
ajax上传图片到PHP并压缩图片显示的方法

ajax上传图片到PHP并

这篇文章主要为大家详细介绍了ajax上传图片到PHP并压