Ajax调试后端输出的最简方案：FormData+Firebug实战教程

在Web开发中，Ajax负责前后端的数据传输，而在调试阶段，我们常常希望快速查看后端返回的数据。有时后端输出内容较复杂，浏览器默认的控制台又不直观，这就让调试变得有些麻烦。本文介绍一种简洁实用的调试方式，通过HTML5的FormData对象结合Firefox的Firebug插件，实现对PHP端输出信息的可视化查看。

Php代码段：（FormData.php）

<?php
/**
 * 功能：提取html5的所有表单数据（html5的FormData表单数据对象）
 */
$data = isset($_POST) ? $_POST : '' ;
if (!empty($data)){
    $str = '';
    foreach ($data as $k=>$v){
        $str .= '键名：' . $k . '，键值：' . $v . '<br/>'; 
    }
    echo $str;
}
?>

Html代码段：（FormData.html）

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
function sendData(){
    var xhr = new XMLHttpRequest();
    var formobj = document.getElementsByName('formdata')[0];
    var formdata = new FormData(formobj);
    formdata.append('aa','哈哈');//手工增加数据
    xhr.open('POST','./FormData.php',true);//①
    xhr.onreadystatechange = function(){//注意：此行一定要把13行第三个参数设置为true，否则该状态不会发生变化（即不会执行该函数）。//②
        if(this.readyState == 4 && this.status == 200){//判断请求成功并且成功响应的状态
            document.getElementById('res').innerHTML = '您传输的信息是：<br/>' + this.responseText;
        }
    }
    xhr.send(formdata); 
}
</script>
</head>
<body>
    <form method='post' name='formdata' action=''>
        用户名：<input type='text' name='username'><br/>
        电邮：<input type='text' name='eamil'><br/>
        地址：<input type='text' name='address'><br/>
        电话：<input type='text' name='tel'><br/>
        <input type='button' value='提交' onclick='sendData();'>
    </form>
    <div id='res'></div>
</body>
</html>

以上代码运行结果：

注意：①处此时为第三个参数为true（即异步工作模式），所以②处的onreadystatechange还可以接收到后端的反馈信息，但如果此时将第三个参数为false（即同步工作模式），那么此时②处将不会触发onreadystatechange事件，所以<div id='res'></div>将接收不到后端反馈的信息。

所以综上所述，以下介绍一种调试的好办法，如果此时想查看php的输出信息，可以在php文件用print_r($_FILES)或者var_dump($_FILES)之类的打印函数输出，然后打开火狐浏览器（前提需要安装firebug），然后按f12键打开firebug，运行FormData.html文件，并选择上传的文件后，firebug的“网络”中会不断显示请求和响应信息，打开FormData.php并打开对应的“响应”或“HTML”项，即可看到后端输出的信息。在此处推荐打开“HTML”项，此项是直观显示输出的提示效果，而“响应”项则是html代码块。两种效果如下图所示：

响应选项

HTML选项

posted @ 2025-11-10 09:18 翰佰尔HiOmics云分析阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

henbio

Ajax调试后端输出的最简方案：FormData+Firebug实战教程

公告