来玩Play框架04 表单

简介: 作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢!   表单(form)是最常见的从客户往服务器传递数据的方式。Play框架提供了一些工具。

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢!

 

表单(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);
}

DynamicFormForm都来自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自动生成。

 

总结

表单

数据提交

 

欢迎继续阅读“Java快速教程”系列文章

 

目录
相关文章
|
4月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
6月前
|
小程序 前端开发 开发者
微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题
微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题
153 0
|
6月前
|
Web App开发 前端开发 JavaScript
SAP UI5 SmartForm 智能表单控件的使用方法介绍试读版
SAP UI5 SmartForm 智能表单控件的使用方法介绍试读版
26 0
|
7月前
|
数据库 数据安全/隐私保护 UED
表单处理(Form Handling):构建用户互动的Web应用的关键技巧
在Web应用程序开发中,表单是与用户互动最频繁的一种元素之一。而表单处理是使用户能够输入、提交和处理数据的关键技术。在本博客中,我们将深入探讨表单处理的概念、不同类型的表单元素、表单验证、表单提交和最佳实践,以及如何有效地使用表单处理来构建具有强大用户互动性的Web应用。
54 0
|
10月前
|
小程序 JavaScript Android开发
微信小程序 web-view 下渲染 cover-view,文字消失 #126
微信小程序 web-view 下渲染 cover-view,文字消失 #126
229 0
|
前端开发
前端项目实战175-ant design form清空表单
前端项目实战175-ant design form清空表单
63 0
从0开发游戏引擎之Win32平台用户输入事件Input类实现
Input类主要实现的功能是 监听用户鼠标键盘事件,当收到操作系统回调之后首先会调到场景管理类,然后通过场景管理类,会调到Input类,然后Input类会传递给KeyInput类和MouseInput处理鼠标和键盘相关的逻辑代码。
APICloud AVM框架封装验证码输入框组件
APICloud AVM框架封装验证码输入框组件实例。 验证码输入框组件,可自定义下次点击等待时长,自定义验证码长度,可根据自定义的验证码长度进行输入内容的验证。
79 0
SwiftUI—如何快速打开一个动作表单
SwiftUI—如何快速打开一个动作表单
116 0
SwiftUI—如何快速打开一个动作表单
|
Web App开发 存储 XML
深入学习SAP UI5框架代码系列之三:HTML原生事件 VS UI5 Semantic事件
(0) SAP UI5应用开发人员了解UI5框架代码的意义 (1) UI5 module懒加载机制 (2) UI5 控件渲染机制 (3) HTML原生事件 VS SAP UI5 Semantic事件(本文) (4) UI5控件元数据实现细节 (5) UI5控件的实例数据实现细节 (6) UI5控件数据绑定的实现原理 (7) UI5控件数据绑定的三种模式:One Way,Two Way和OneTime实现原理比较 (8) UI5控件ID的生成逻辑 (9) UI5控件的多语言(国际化,Internationalization,i18n)支持的实现原理 (10) XML视图里的b
162 0
深入学习SAP UI5框架代码系列之三:HTML原生事件 VS UI5 Semantic事件