这次给大家带来JS+ajax实现php异步提交表单,JS+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> <p id="tip"></p> </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才能准确地获取返回的信息。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Ajax+Session失效后即刻跳转登录页面

ajax访问到Session失效如何处理

以上就是JS+ajax实现php异步提交表单的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码