如何使用ajax开发web应用程序[4]

作者： Jonathan Fenocchi
时间：2005.10.25
译者：Sheneyan
英文原文：
http://webreference.com/programming/javascript/jf/column15/

在这个系列的第四部分中，你将会学习如何在不刷新页面的前提下通过form来提交数据。这能在很多方面发挥作用。让我们现从表单(form)的HTML开始，然后我们再给它加上javascript脚本，通过ajax提交表单。

请注意，在这篇文章中我会使用PHP来响应javascript提交的服务端请求，所以在文章中提及的代码需要保存为一个后缀为.PHP的文件并在一个支持 PHP的服务器上运行。它没法直接在你的本地硬盘上工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"@L_403_1@">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>如何使用ajax开发web应用程序(4)</title>
<style type="text/css">
.note {
background: #ffa;
border: solid 1px #f30;
margin: 1em;
padding: 0.5em;
}
</style>
</head>
<body>
<form action="ajax_output.PHP" method="post"><fieldset>
<label>姓名: <input type="text" name="name"></label><br>
<label>出生地: <input type="text" name="born"></label><br>
<label><input type="submit" value="Submit form"></label>
</fieldset></form>
</body>

这个表单会提交到这个PHP 文件：ajax_output.PHP－－将接受数据并输出它。

<?PHP
if(isset($_POST)){
echo '<div class="note">';
if(isset($_POST['name']) && !empty($_POST['name'])){
echo '<p>你好,'.$_POST['name'].'.</p>';
}
if(isset($_POST['born']) && !empty($_POST['born'])){
echo '<p>你出生于风景如画的'.$_POST['born'].'!</p>';
}
echo '</div>';
}
?>

这个PHP 文件将输出一个包含两个段落的DIV。如果文本域name填写了内容，将输出"你好,[你的名字]"。如果文本域born填写了内容，将会输出"你出生于风景如画的[出生地名]!"，如果你两个空格都填了，那将输出两个消息到同一个DIV中。

该添加javascript了，下面是javascript代码以及说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"@L_403_1@">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如何使用ajax开发web应用程序(4)</title>
<style type="text/css">
.note {
background: #ffa;
border: solid 1px #f30;
margin: 1em;
padding: 0.5em;
}
</style>
<script type="text/javascript">
function submitForm(f){
if(window.XMLHttpRequest){
var xmlReq = new XMLHttpRequest();
} else if(window.ActiveXObject) {
var xmlReq = new ActiveXObject('Microsoft.XMLHTTP');
}
var formData = '',elem = '';
for(var s=0; s<f.elements.length; s++){
elem = f.elements[s];
if(formData != ''){
formData += '&';
}
formData += elem.name+"="+elem.value;
}
xmlReq.onreadystatechange = function(){
if(xmlReq.readyState == 4){
document.getElementByIdx_x_x('insert').innerHTML = xmlReq.responseText;
}
}
xmlReq.open(f.method,f.action,true);
xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlReq.send(formData);
return false;
}
</script>
</head>
<body>
<div id="insert"></div>
<form action="ajax_output.PHP" method="post" onsubmit="return submitForm(this)"><fieldset>
<label>姓名: <input type="text" name="name"></label><br>
<label>出生地: <input type="text" name="born"></label><br>
<label><input type="submit" value="提交表单"></label>
</fieldset></form>
</body>

查看示例

你先注意以下javascript标签部分。这是一个将在表单被提交的时候触发的函数（表单里的onsubmit事件句柄(event handler)将调用这个函数）。这个函数首先创建一个XMLHttpRequest，它用于传输数据到表单的action（ajax_output.ph[）。下一步，我们遍历每一个表单元素并将它们使用（&）连接起来以便于数据可以被正确地传送给action。接下来，我们创建了一个onReadyStateChange函数用于将这个id为insert的DIV和ajax_output.PHP传输回来的数据组合起来。然后我们打开表单的method(ajax_output.PHP)－－用POST或者GET（在我们的ajax_output.PHP中，我们只接受POST的数据）－－以及action (ajax_output.PHP)。我们需要设置正确的请求头（request header）以便于javascript能够发送经过URL编码的form数据(form urlencoded data)给ajax_output.PHP，最后就是让javascript发送数据了。

结论

这个脚本是非常通用并且在很多方面都很有用的，因为你能够将form里面的任何表单元素组合成数据并post给这个表单的action而不需要重新加载页面。你只需要简单的修改这个表单的action指向的文件，相应地修改和表单对应的输入域的名字以及如何处理数据。

关于作者

Jonathan Fenocchi(mail:jona#slightlyremarkable.com #换成@)是一个网络开发者，主攻web设计，客户端脚本，PHP脚本。
他的网站位于：http://www.slightlyremarkable.com

本文链接：http://www.blueidea.com/tech/program/2006/3214.asp　出处：蓝色理想责任编辑：moby

原文链接：https://www.f2er.com/ajax/165364.html

如何使用ajax开发web应用程序[4]

猜你在找的Ajax相关文章