脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → AJAX相关 → ajax异步提交表单

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

 更新时间：2016年05月25日 11:49:50   投稿：jingxian  
下面小编就为大家带来一篇纯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异步提交表单的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Ajax+PHP简单基础入门实例教程

    Ajax+PHP简单基础入门实例教程

    Ajax 由 HTML、JavaScript&#8482; 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。对于Ajax，最核心的一个对象是XMLHttpRequest，所有的ajax操作都离不开对这个对象的操作。
    2008-12-12
  • 利用Ajax检测用户名是否被占用的完整实例

    利用Ajax检测用户名是否被占用的完整实例

    这篇文章主要给大家介绍了关于如何利用Ajax检测用户名是否被占用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 关于Ajax的疑难杂症详解

    关于Ajax的疑难杂症详解

    这篇文章主要给大家介绍了关于Ajax的疑难杂症,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • AJAX请求是否真的不安全？谈一谈Web安全与AJAX的关系

    AJAX请求是否真的不安全？谈一谈Web安全与AJAX的关系

    Ajax中没有固有的安全漏洞，但是对该技术向量的适配显著地改变了网络应用的开发途径以及方法论。AJAX请求的安全性是大家经常会谈论的一个话题，AJAX请求是否真的不安全？下面这篇文章就来给大家详细谈一谈Web安全与AJAX关系的相关资料，需要的朋友可以参考下。
    2018-01-01
  • 利用ajax提交form表单到数据库详解(无刷新)

    利用ajax提交form表单到数据库详解(无刷新)

    这篇文章主要给大家介绍了关于利用ajax提交form表单到数据库(无刷新)的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-02-02
  • AJAX(XMLHttpRequest.status)状态码

    AJAX(XMLHttpRequest.status)状态码

    本文罗列了一些Jquery中AJAX参数详细列表及XMLHttpRequest.status状态吗，感兴趣的你可以参考下，希望对你学习ajax有所帮助
    2013-02-02
  • AJAX避免用户重复提交请求实现方案

    AJAX避免用户重复提交请求实现方案

    为了避免因某些原因用户同时多次点击按钮，提交重复的请求，我们需要禁用请求提交按钮，接下来与大家一起分享下实现方法
    2013-04-04
  • 服务端配置实现AJAX跨域请求

    服务端配置实现AJAX跨域请求

    这篇文章主要介绍了服务端配置实现AJAX跨域请求的相关资料,需要的朋友可以参考下
    2015-02-02
  • ajax判断后端返回的数据是否为null的方法

    ajax判断后端返回的数据是否为null的方法

    今天小编就为大家分享一篇ajax判断后端返回的数据是否为null的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Ajax 向数据库修改和添加功能(较简答)

    Ajax 向数据库修改和添加功能(较简答)

    这篇文章主要介绍了Ajax 向数据库修改和添加功能(较简答)，非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03

最新评论