«
»
Ajax 和 XML: 用于表单的 Ajax上
2008-10-11 22:36:00查看学习心得
{GetProperty(Content)}
本文作者:
«
»
«
»
在 HTML 表单中结合 Asynchronous JavaScript? + XML (Ajax) 的服务器回调机制，对表单应用 Ajax，对于为应用程序增加 Web 2.0 功能来说是一种可行的办法。通过本文了解增加 Ajax 代码改进 PHP 应用程序用户体验的各种技术。
谈到 Web 2.0 应用程序，首先想到的就是那些最杰出的应用：YouTube 的视频、 üGoogle Maps 可滚动的地图以及 Flikr 的地理定位功能。但是人们常常忽略的是，在这些网站上那些粗糙的 HTML 表格正随着 Ajax 技术的普及经历一场重大的变革。
简单的 Ajax 表单提交
我们从最简单的东西入手：一个包含多个字段的注册表单，希望通过 Ajax 而不是常规的 Web 表单上传办法来提交。清单 1 显示了这个简单的表单。
清单 1. index.html
<html>
<head>
<script src="prototype.js"></script>
</head>
<body>
<form id="myform">
<table>
<tr><td>First</td><td><input type="text" name="first"></td></tr>
<tr><td>Last</td><td><input type="text" name="last"></td></tr>
<tr><td>Email</td><td><input type="text" name="email"></td></tr>
</table>
<input type="button" onclick="dosubmit()" value="Submit">
</form>
<div id="result" style="padding:5px;">
</div>
<script>
function dosubmit( ) {
new Ajax.Updater( 'result', 'add.php', { method: 'post',
parameters: $('myform').serialize() } );
$('myform').reset();
}
</script>
</body>
</html>
文件的一开始包含了 prototype.js JavaScript 文件，它将帮助我完成所有的 Ajax 操作。接下来是传统的 HTML 表单，包含三个字段：first、last 和 email。再下面是使用 dosubmit() JavaScript 函数提交表单的按钮。
dosubmit() 函数使用 Ajax.Updater 类把数据上传给 add.php 脚本。然后添加调用选项。这里将提交方法设置为 post，然后使用表单的 serialize() 方法添加参数。serialize() 方法不是标准的 JavaScript 代码，由 JavaScript 库来提供。
调用 Ajax.Updater 的第一项是 <div> 标记的 ID，它接收 add.php 脚本返回的 HTML。在用户单击按钮时通知用户发生了什么，这是最简单的办法。
add.php 脚本如清单 2 所示。
清单 2. add.php
Thanks <?php echo(