开发学院网页设计 JavaScript JavaScript EE，第 3 部分: 结合使用 Java Script... 阅读

JavaScript EE，第 3 部分: 结合使用 Java Scripting API 和 JSP

　2009-07-31 00:00:00　来源：WEB开发网　　　

核心提示： 图 1 中的屏幕截屏展示了样例表单，该表单包含许多输入字段和三个按钮，JavaScript EE，第 3 部分: 结合使用 Java Scripting API 和 JSP(10)，按钮标签分别为 Add、Remove 和 Send，Add 按钮将新的输入字段附加到表单，Web 浏览器将数据发送

图 1 中的屏幕截屏展示了样例表单，该表单包含许多输入字段和三个按钮，按钮标签分别为 Add、Remove 和 Send。Add 按钮将新的输入字段附加到表单，Remove 按钮删除上一个字段，Send 向服务器提交表单数据。

图 1. 简单的动态表单

当在服务器上执行 DynamicForm.jsp 时，名为 outputForm() 的 JavaScript 函数生成初始输入字段。如清单 11 所示，这些字段都放入 <div> 元素，元素内容可以使用 updateForm() 函数进行修改，当用户单击 Add 或 Remove 时，将在 Web 浏览器中调用该函数。用户单击 Send 时，用户输入将使用 submitForm() 函数（该函数使用 XMLHttpRequest）提交到服务器。

如果禁用 JavaScript，那么用户按钮按钮时将不调用任何函数，在这种情况下，Web 浏览器将数据发送到服务器。启用 JavaScript 时不会发生这种情况，因为 updateForm() 和 submitForm() 函数就返回 false。

清单 11. DynamicForm.jsp 表单

　　　 <html>　 <head>　 <title>Dynamic　Form</title>　　　...　 </head>　 <body>　　　<b>Dynamic　Form</b><br>　　　<form　name="dynamicForm"　method="POST"　action="DynamicForm.jsp">　　　　　<div　id="inputDiv">　　　　　　　<js:script　runat="server">　　　　　　　　　outputForm();　　　　　　　</js:script>　　　　　</div>　　　　　<input　type="submit"　name="add"　value="Add"　　　　　　　　　onclick="return　updateForm('add')">　　　　　<input　type="submit"　name="remove"　value="Remove"　　　　　　　　　onclick="return　updateForm('remove')">　　　　　<input　type="submit"　name="send"　value="Send"　　　　　　　　　onclick="return　submitForm()">　　　</form>　 </body>　 </html>　