各位朋友看下面的代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>html5 ajax测试</title>
<script type="text/javascript">
function _send()
{
var fm = document.getElementById('tform');
var fd = new FormData(fm); //把表单的文档对象给传过去
var xhr = new XMLHttpRequest();
xhr.open('POST', './test_post.php', true);
xhr.onreadystatechange = function ()
{
if (this.readyState == 4)
{
document.getElementById('debug').innerHTML = this.responseText;
}
//document.getElementById('debug').innerHTML = this.readyState;
}
xhr.send(fd);
}
</script>
</head>
<body>
<form id="tform">
<p>用户名:<input type="text" name="username" /></p>
<p>年龄:<input type="text" name="age" /></p>
<p>邮箱:<input type="text" name="email" /></p>
<p>性别:<input type="text" name="gender" /></p>
<p><input type="submit" value="ajax发送" onclick="_send();"></p>
</form>
<div id="debug">
</div>
</body>
</html>
我的test_post.php中的代码是:
<?php
print_r($_POST);
?>
在我的表单中正常输入数据后,点击提交,为什么我的:
<div id="debug">
</div>
中没有显示test_post.php中的数据,求解啊!
------解决方案--------------------
第十行的错了, new的new FormData 是没有参数的,然后利用生成的对象append 数据
------解决方案--------------------
<input type="submit" value="ajax发送" onclick="_send();">
应为
<input type="submit" value="ajax发送" onclick="return _send();">
_send 应返回 false
或
<input type="button" value="ajax发送" onclick="_send();">