|
作者： Jonathan Fenocchi
時間：2005.10.25
譯者：Sheneyan
英文原文：
http://webreference.com/programming/javascript/jf/column15/
在這個系列的第四部分中，你將會學習如何在不刷新頁面的前提下通過form來提交數(shù)據(jù)。 這能在很多方面發(fā)揮作用。讓我們現(xiàn)從表單(form)的HTML開始，然后我們再給它加上javascript腳本，通過ajax提交表單。
請注意，在這篇文章中我會使用php來響應javascript提交的服務端請求，所以在文章中提及的代碼需要保存為一個后綴為.php的文件并在一個支持php的服務器上運行。它沒法直接在你的本地硬盤上工作。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>如何使用ajax開發(fā)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－－將接受數(shù)據(jù)并輸出它。
<?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"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>如何使用ajax開發(fā)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.getElementById('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標簽部分。這是一個將在表單被提交的時候觸發(fā)的函數(shù)（表單里的onsubmit事件句柄(event handler)將調用這個函數(shù)）。這個函數(shù)首先創(chuàng)建一個XMLHttpRequest，它用于傳輸數(shù)據(jù)到表單的action（ajax_output.ph[）。下一步，我們遍歷每一個表單元素并將它們使用（&）連接起來以便于數(shù)據(jù)可以被正確地傳送給action。接下來，我們創(chuàng)建了一個onReadyStateChange函數(shù)用于將這個id為insert的DIV和ajax_output.php傳輸回來的數(shù)據(jù)組合起來。然后我們打開表單的method(ajax_output.php)－－用POST或者GET（在我們的ajax_output.php中，我們只接受POST的數(shù)據(jù)）－－以及action (ajax_output.php)。我們需要設置正確的請求頭（request header）以便于javascript能夠發(fā)送經過URL編碼的form數(shù)據(jù)(form urlencoded data)給ajax_output.php，最后就是讓javascript發(fā)送數(shù)據(jù)了。
結論
這個腳本是非常通用并且在很多方面都很有用的，因為你能夠將form里面的任何表單元素組合成數(shù)據(jù)并post給這個表單的action而不需要重新加載頁面。你只需要簡單的修改這個表單的action指向的文件，相應地修改和表單對應的輸入域的名字以及如何處理數(shù)據(jù)。
關于作者
Jonathan Fenocchi(mail:jona#slightlyremarkable.com #換成@)是一個網絡開發(fā)者，主攻web設計，客戶端腳本，php腳本。
他的網站位于：http://www.slightlyremarkable.com
本文鏈接：http://www.95time.cn/tech/program/2006/3214.asp 
出處：藍色理想
責任編輯：moby
上一頁 如何使用ajax開發(fā)web應用程序 [3] 下一頁
◎進入論壇網絡編程版塊參加討論
|
第 1 頁 
第 4 頁 如何使用ajax開發(fā)web應用程序 [4]
