当前位置: 代码迷 >> PHP >> html5中 FormData api ajax使用的有关问题
  详细解决方案

html5中 FormData api ajax使用的有关问题

热度:104   发布时间:2016-04-28 19:12:41.0
html5中 FormData api ajax使用的问题
各位朋友看下面的代码:

<!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();">
  相关解决方案