这篇文章将为大家详细讲解有关纯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才能准确地获取返回的信息。
ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。
关于“纯javascript中ajax如何实现php异步提交表单”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.jb51.net/article/85049.htm