DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Prototype框架極速應用
Prototype框架極速應用
編輯:AJAX詳解     
 prototype是個不錯的框架,啥語言都可以用。比如一個針對某條新聞,讀者要發評論的話,可以這樣設計

<script src="prototype.JS"></script>

<script language="Javascript">
<script>
function addcomment()
{
new AJax.Updater('comments', 'vIEwcommentsubmit.PHP',
{
method: 'post',
parameters: $('theform').serialize(),
onSuccess: function() {
$('name').value = '';
$('content').value='';
}
} );
}
</script>
<div id='comments' >

...//這裡從數據庫中讀出評論,比如分頁
</div>
<form name="theform" method="post" >
<div align="center">
<table>

<td align=center><font class=m1>用戶名:</font>
<input name="name" type="text" maxlength="18"><font class=m1>(不填用戶名則顯示IP)</font>
<br></td>
</tr>
<tr>
<td align=center><textarea name="content" cols="50" rows="4" id="textarea"></textarea>
<br>
<input type="submit" name="Submit" value="遞交" onClick="addcomment()">
<input type="reset" name="Reset" value="清空">
<input name="pid" type="hidden" id="pid" value="<? echo($id);?>"></td>
</tr>
</table></div>
</form>

這裡,當按提交按鈕後,調用addcomment()函數,然後<div id="comments">這裡,設置了將要顯示評論的內容區域,這裡可以從數據庫中讀出來顯示之。
在addcomment()函數中,new AJax.Updater('comments', 'vIEwcommentsubmit.PHP',
{
method: 'post',
parameters: $('theform').serialize(),
onSuccess: function() {
$('name').value = '';
$('content').value='';
}
} );
這段十分有趣,new AJax.Updater('comments', 'vIEwcommentsubmit.PHP',
中,調用prototype的內置好的功能來實現了,comments是剛才預留的區域(div),vIEwcommentssubmit.PHP是真正處理提交評論到數據庫的程序哦,
parameters: $('theform').serialize()這句,是將form id="theform"這個表單內的參數進行提交
, onSuccess: function() {
$('name').value = '';
$('content').value='';
}
這段,是說當提交到數據庫成功後,回調onsuccess事件,其中把name,content這兩個文本框清空

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved