当前位置：首页 > news >正文

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

news 2026/5/12 5:25:32

在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代码块。两种效果如下图所示：