php异步请求提交表单,JS+ajax实现php异步提交表单

这次给大家带来JS+ajax实现php异步提交表单，JS+ajax实现php异步提交表单的注意事项有哪些，下面就是实战案例，一起来看一下。

很多时候需要异步提交表单，当表单太多是时候，一个个getElementById变得很不实际

当然，jquery可以实现异步提交表单，jquery.form.js这个库貌似也挺流行

只是有时候并不想使用额外的库，所以就琢磨着自己写，用纯js来实现异步提交表单

实现如下(本例用POST方式提交，用php作为服务器脚本)

HTM L文件：test

Username:

JS文件：name_form.jsfunction 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中文网其它相关文章！

推荐阅读：