来玩Play框架04 表单
表单(form)是最常见的从客户往服务器传递数据的方式。Play框架提供了一些工具。它们可以从表单中提取数据,验证提交数据的合法性,或者在视图中显示表单。我先来介绍最简单的使用表单提交数据的方式。
增加表单
我可以用纯粹html的方式产生一个表单。在app/views下增加模板form.scala.html:
<!DOCTYPE html>
<html>
<body>
<form method="POST" action="/postForm">
<input type="text" name="content"></input>
<input type="submit"></input>
</form>
</body>
</html>
在Application控制器中,增加一个动作form(),显示模板:
public static Result form() {
return ok(views.html.form.render());
}
在routes中增加导航
GET /form controllers.Application.form()
页面如下:
数据提取
在文本框中输入任意字符,点击submit后,表单将以POST方法提交到/postForm这一URL。增添负责处理该URL的动作,Application.postForm()
public static Result postForm() {
DynamicForm in = Form.form().bindFromRequest();
String result = in.get("content");
return ok(result);
}
DynamicForm和Form都来自play.data。Form.form().bindFormRequest()从请求中提取表单信息,并放入到DynamicForm类型的in对象中。
我上面用get()方法,来提取表单中不同名字的输入栏。比如上面的"content"。postForm()动作把表单中填写的内容直接显示。
增加routes记录
POST /postForm controllers.Application.postForm()
在/form的页面下输入任意字符串并提交,查看效果。
我介绍了表单最基本的使用方式。下面了解Play框架提供的其它的表单工具。
表单对象
在动作内部,可以创建一个对象来指代表单。表单的每个输入栏为表单对象的一个属性。我可以通过增加标注(annotation)的方法,验证表单的输入(Form Validation)。
首先修改app/views/form.scala.html
<!DOCTYPE html>
<html>
<body>
<form method="POST" action="/postForm">
<label>Email</label>
<input type="email" name="email">
<label>Password</label>
<input type="password" name="password">
<label>Comment</label>
<input type="text" name="comment">
<input type="submit">
</form>
</body>
</html>
这个表单有三个输入栏,名字分别为email, password和comment。
创建app/util/文件夹,在其中创建User.java。User类用于在Play内部指代上面的表单:
package util;
import play.data.validation.Constraints.Email;
import play.data.validation.Constraints.Required;
public class User {
@Email
public String email;
@Required
public String password;
public String comment;
}
User类指代一个表单的数据。我还为两个属性增加了标注。Play服务器可以据此验证输入的合法性。比如@Email的限定就要求输入为"*@*"的形式。@Required则要求输入栏不为空。如果违反这些限定,那么Play将抛出异常。
修改动作postForm()。User类的对象user用来保存表单数据。
public static Result postForm() {
Form<User> userForm = Form.form(User.class);
User user = userForm.bindFromRequest().get();
return ok(user.email + " " + user.password);
}
最后的ok()中调用了表单对象中保存的数据。
分别输入合法和不合法的数据,观察Play返回的页面。
表单模板
我上面手动创建模板中的表单,并保持视图中的表单和表单对象一致。我还可以在模板中直接调用表单对象。这样做,能让视图中的表单和表单对象自动的保持一致。
修改form.scala.html为
@(userForm: Form[util.User])
<!DOCTYPE html>
<html>
<body>
@helper.form(action = routes.Application.postForm()) {
@helper.inputText(userForm("email"))
@helper.inputPassword(userForm("password"))
@helper.inputText(userForm("comment"))
<input type="submit">
}
</body>
</html>
这里使用了Play所提供的helper工具。helper可以在表单中增加表单form,再加入不同类型的输入栏,比如inputText和inputPassword。
修改原有的动作form()
public static Result form() {
Form<User> userForm = Form.form(User.class);
return ok(views.html.form.render(userForm));
}
这里,表单对象作为参数传递给模板。最后的html页面中的表单,将由Play自动生成。
总结
表单
数据提交
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Nginx 跨域 add_header 403状态下无效
- Cannot set property 'branchdata' of undefined
- 【每日一题】27. Remove Element
- 【CPP】《程序员面试金典》习题(1)——数组与字符串
- 【CPP】《程序员面试金典》习题(2)——链表
- 【CPP】《程序员面试金典》习题(3)——栈和队列
- PPYOLO:2020不容错过的目标检测调参Tricks
- 【笔记】《C++Primer》—— 第11章:关联容器
- 【笔记】《C++Primer》—— 第12章:动态内存
- 【笔记】《C++Primer》—— 第13章:拷贝控制
- 【笔记】《C++Primer》—— 第16章:模板与泛型编程
- 【笔记】《C++Primer》—— 第19章:特殊工具与技术
- 【翻译】C++14的新特性简介
- Python 为什么要有 pass 语句?
- 【翻译】C++17的新特性简介