很多时候需要异步提交表单,当表单太多是时候,一个个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基础详解教程(一) Ajax基础详解教程(二) 今天接着我...
基于Node.js平台的Express教程 Express 简介 什么是 Express Express 能做什么 E...
朋友发的,界面不错。收藏...... 打包下载 http://xiazai.jb51.net/yuanma/bianj...
支持多行同时拖拽,重复数据不重得添加,添加了图表右键菜单. 复制代码 代码如下...
在jstl里面有fn:contains(str,str)这样的方法来判断字符串是否包含另一个字符串...
MySQL数据库与数据表的创建 文章目录 MySQL数据库与数据表的创建 前言 一、创建...
Go原生就支持连接数据库,所以在使用 Golang 开发时,当需要数据库交互时,即可...
最近有朋友向笔者反馈Win10的一个蛋疼问题,这位朋友最近重装了系统,发现系统盘...
01唯有文件得人心 当一个女生让你替她抓100只萤火虫,她一定不是为了折磨你,而...
数据库具有组织化的数据存储功能。存储具有用于放置数据的特定结构。每种数据库...