发表时间：2009-02-23
最后修改：2009-02-26
在处理Ajax 的form提交时 总是要从表单中一个一个的取值 很是麻烦 今天发现 phototype 1.5.1.2有了一个很好的解决方案 现在把代码粘贴如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Prototype examples</title>
<script type="text/javascript" src="prototype-1.5.1.2.js">
</script>
<script>
function postIt()
{
var f=$('formID');
var element = f.serialize();
alert("element=" + element.inspect());
f.request({
method: 'POST',
parameters: 'us=4&ws=5',
onComplete: showResult
})
}
function showResult(request)
{
var obj=request.responseText;
alert(obj);
}
</script>
</head>
<body>
<div id='systemWorking' style="display: none">
Loading...
</div>
<br />
<form id="formID" method="POST" action="1.jsp"
onsubmit="return false">
<fieldset>
<legend>
User info
</legend>
<div>
<label for="username">
Username:
</label>
<input type="text" name="username" id="username" value="" />
</div>
<div>
<label for="age">
Age:
</label>
<input type="text" name="age" id="age" value="" size="3" />
</div>
<div>
<label for="hobbies">
Your hobbies are:
</label>
<select name="hobbies" id="hobbies" multiple="multiple">
<option>
coding
</option>
<option>
swimming
</option>
<option>
hiking
</option>
<option>
drawing
</option>
</select>
</div>
<div class="buttonrow">
<input type="submit" onclick="postIt()" value="serialize!" />
</div>
</fieldset>
</form>
<script>
var myGlobalHandlers = {
onCreate: function(){
Element.show('systemWorking');
},
onComplete: function() {
if(Ajax.activeRequestCount == 0){
Element.hide('systemWorking');
}
}
};
Ajax.Responders.register(myGlobalHandlers);
</script>
</body>
</html>
1.jsp
---------------------
<%@ page language="java" contentType="text/html;charset=UTF-8" %><%
String s=request.getParameter("us");
String s2=request.getParameter("age");
out.print(s+" "+s2);
%>
注意事情：
1.phototype 要在1.5.0以上才可以测试通过
2.Ajax.Responders.register(myGlobalHandlers); 这个东东是在调用Ajax的时候显示一个调用的提示 具体可以测试看其效果
