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

赞 (0)

相关推荐

  • Ajax异步提交表单数据的说明及方法实例

    场景描述:对于一个登录页面中有一个登录的表单,但是由于登录验证逻辑比较复杂,我们希望点击登录后不刷新当前页面,给出登录结果后再选择是跳到新的页面还是提示用户名密码错误.类似这样的问题很多很多.异步获取数据使用户体验大大增强.背景知识:Ajax指的是异步JavaScript及XML(Asynchronous JavaScript And XML).AJAX 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术.通过AJAX,您的JavaScript 可使用Java

  • Javascript异步表单提交，图片上传，兼容异步模拟ajax技术

    前言: 咋一看标题还挺长的呢,还有这么多功能,其实简化一点就是一个功能,异步表单提交,只是在异步表单提交这个大功能下,可以实现图片上传,模拟ajax技术(其实很早以前就是通过这个方式来实现多浏览器的兼容ajax,这里只是怀怀旧,作为一个技术来玩玩),下面的内容需要有一定的js基础,要不然理解起来会比较困难. 注意事项: 这是我bBank里面的一个方法,现在我把他提取出来成一个通用方法来讲解. bBank 框架介绍:http://www.cnblogs.com/bruceli/archive/20

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

    很多时候需要异步提交表单,当表单太多是时候,一个个getElementById变得很不实际 当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L文件:test <html> <head> <script type="text/javascript" src="nam

  • Jquery.Form 异步提交表单的简单实例

    http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html# 1. 在你的页面里写一个表单.一个普通的表单,不需要任何特殊的标记: 复制代码 代码如下: <form id="myForm" method="post" action="/Home/AjaxForm"><div>Name:<input id="username&qu

  • 使用ajax异步提交表单的几种方法总结

    这里介绍三种常用的提交方式 方式一 手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', url:'Notice_noTipsNotice', data:'k1=v1&k2=v2...', cache:false, dataType:'json', success:function(data){ } }); 方式二 单序列化:$('#myfor

  • jQuery异步提交表单的两种方式

    本文为大家分享了两种jQuery异步提交表单的方式,具体内容如下 第一种方式:普通ajax方式提交 $(function(){ $('#send').click(function(){ $.ajax({ type: "GET", url: GLOBAL_PATH + "/Enterprise/savecompanyphoto", data: {username:$("#username").val(), content:$("#cont

  • JQuery异步提交表单与文件上传功能示例

    JQuery异步提交表单与文件上传功能示例

    本文实例讲述了JQuery异步提交表单与文件上传功能.分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件. 示例如下: index.html <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script type="text/javascript"

  • jQuery异步提交表单实例

    前言: 我们在开发的时候,一定会使用ajax异步提交表单,在这里总结一下: 前提准备:引入脚本 <!--jquery需要引入的文件--> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script> <!--ajax提交表单需要引入jquery.form.js--> <script type="text/javascript&q

  • jquery.form.js异步提交表单详解

    本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下 引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">

  • jquery下异步提交表单 异步跨域提交表单

    1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 使用 jQuery 异步提交表单代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <script src="js/jquery-1.4.2.js">&l

  • Jquery异步提交表单代码分享

    功能很实用代码也很简单,就不多废话了,直接奉上: $.ajax({ url:"mobileSurveyAction_addSurvey.action",//提交地址 data:$("#form1").serialize(),//将表单数据序列化 type:"POST", dataType:"json", success:function(result){ if (result.success == '100'){ $(&quo

  • 纯JS实现可拖拽表单的简单实例

    因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然

随机推荐