在web开发中，用的最多的就是表单了，用户通过表单提交数据到系统后台，系统又可以通过表单传递的数据做业务分析。那么这章就学习在vert.x中怎么使用表单，获取表单的参数值。

编写一个表单模板代码resources/templates/user.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form action="/user" method="post">

        <label>姓名</label>

        <input type="text" name="name">

        <br>

        <label>性别</label>

        <input type="checkbox" name="sex" value="M">男

        <input type="checkbox" name="sex" value="F">女

        <br>

        <label>年龄</label>

        <select name="age">

            <option value="1">一岁</option>

            <option value="2">两岁</option>

            <option value="3">三岁</option>

            <option value="4">四岁</option>

        </select>

        <br>

        <input type="submit" value="保存">

    </form>

</body>

</html>

从form的action里面看到，我们将post请求提交给/user，下面编写过去表单参数值的代码Form.java

package com.javafm.vertx.helloworld;

import io.vertx.core.Vertx;

import io.vertx.core.http.HttpServer;

import io.vertx.ext.web.Router;

import io.vertx.ext.web.handler.BodyHandler;

import io.vertx.ext.web.templ.ThymeleafTemplateEngine;

import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver;

/**

 * Created by lemontea <36634584@qq.com> on 16-12-21.

 */

public class Form {

    public static void main(String[] args) {

        Vertx vertx = Vertx.vertx();

        ThymeleafTemplateEngine engine = ThymeleafTemplateEngine.create();

        ClassLoaderTemplateResolver resolver = new ClassLoaderTemplateResolver();

        resolver.setPrefix("templates");

        resolver.setSuffix(".html");

        resolver.setTemplateMode("HTML5");

        engine.getThymeleafTemplateEngine().setTemplateResolver(resolver);

        Router router = Router.router(vertx);

        router.route().handler(BodyHandler.create());

        router.get("/user").handler(routingContext -> {

            engine.render(routingContext, "/user", res -> {

                if (res.succeeded()) {

                    routingContext.response().putHeader("Content-Type", "text/html").end(res.result());

                } else {

                    routingContext.fail(res.cause());

                }

            });

        });

        router.post("/user").handler(routingContext -> {

            String name = routingContext.request().getParam("name");

            String sex = routingContext.request().getParam("sex");

            String age = routingContext.request().getParam("age");

            routingContext.response().putHeader("Content-Type", "text/html").end("姓名：" + name + "，性别：" + sex + "，年龄：" + age);

        });

        HttpServer httpServer = vertx.createHttpServer();

        httpServer.requestHandler(router::accept).listen(8080);

    }

}

router.get("/user")的作用是当从浏览器访问/user路径时，就把上面的user.html模板渲染出来，也就是显示上面的user.html这个表单页面。

router.post("/user")的作用是当用户在表单页面点击保存按钮后，触发post请求，vert.x会将这个请求路由到router.post("/user").handler里面，在这里面就可以处理表单传递过来的数据了。

当然光凭router.post("/user")和routingContext.request().getParam还是无法拿到表单的值的，还需要配置router.route().handler(BodyHandler.create());

BodyHandler就是用来处理Request请求消息体的，有了它，你就可以通过routingContext.request().getParam来获取参数了。

写好上面代码后，运行http服务，就可以在浏览器中查看效果了

图一、在表单中录入数据

图二、获取表单提交的参数，并向浏览器中输出

原创文章，转载请注明出处。

vert.x学习（七），使用表单获取用户提交的数据的更多相关文章

  1. django 获取用户提交的数据 文件 表单

    templates: <div> <form action="/detail" method="post" enctype="mul ...

  2. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  3. node——将用户提交的数据写入data.json文件

    前续 当我们在进行将数据提交到某个网页时,需要将提交数据保存下来 1.提交数据 2.获得数据 3.保存数据 先看提交数据: <!DOCTYPE html> <html lang=&q ...

  4. WebAPI的AuthorizeAttribute扩展类中获取POST提交的数据

    在WEBAPI中,AuthorizeAttribute类重写时,如何获取post数据是个难题,网上找资料也不好使,只能自己研究,通过研究发现,WEBAPI给了我们获取POST数据的可能,下面介绍一下: ...

  5. Servlet中如何获取用户提交的查询参数或表单数据？

    ①HttpServletRequest的getParameter()方法. ②HttpServletRequest的getParameterValues()方法. ③HttpServletReques ...

  6. 吴裕雄--天生自然 PHP开发学习：表单和用户输入

    <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</t ...

  7. Apicloud学习第三天——获取云数据库的数据方法

    apicloud学习30天中的对用进行注册和登录以及数据的获取的代码,在apicloud中有单独的api对用户的增删查改进行操作,这里写下增加和查询. 增加用户数据 var model=api.req ...

  8. 微信小程序云开发-数据库-获取用户添加的数据到数据库

    一.列表页面新增[添加商品]按钮 在列表页增加[添加商品]按钮,按钮绑定事件toAdd(),用户点击该按钮跳转到添加商品页面. 在js文件中写toAdd()函数,作用是点击[添加商品]按钮,跳转到[添 ...

  9. FORM表单不刷新提交POST数据

    很多时候表单太多项,JQ懒的去处理了 使用这个提交吧.和她讨论出去旅游,去哪里好呢,此时还和以前一样吗? function testaction(){ var f = $("#publish ...

随机推荐

  1. java17

    1:登录注册案例(理解) 2:Set集合(理解) (1)Set集合的特点 无序,唯一 (2)HashSet集合(掌握) A:底层数据结构是哈希表(是一个元素为链表的数组) B:哈希表底层依赖两个方法: ...

  2. Angularjs 双向绑定机制解析

    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...

  3. iOS 状态栏隐藏显示

    在 info.plist 文件中 配置 View controller-based status bar appearance 对应的值为 NO 这样可以使用 application 对象来设置 状态 ...

  4. 51nod1079(中国剩余定理)

    题目链接: http://www.51nod.com/onlineJudge/user.html#!userId=21687 题意: 中文题诶~ 思路: 本题就是个中国剩余定理模板题,不过模拟也可以过 ...

  5. AT常见问题

    https://m.douban.com/note/247040789/?from=author

  6. come on，逆战

    腾讯游戏       琳琅天上        逆战                                                                            ...

  7. flume＋kafka＋hbase＋ELK

    一.架构方案如下图: 二.各个组件的安装方案如下: 1).zookeeper+kafka http://www.cnblogs.com/super-d2/p/4534323.html 2)hbase ...

  8. Android 框架练成 教你打造高效的图片加载框架（转）

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/41874561,本文出自:[张鸿洋的博客] 1.概述 优秀的图片加载框架不要太多, ...

  9. Oracle的索引适用范围

    若字段数据的重复率不是很高,而且数据量不是很大,考虑B树索引: 若字段数据的重复率较高,而且查询中有特定的查询方式(比如列之间有或,与等逻辑运算),则考虑位图索引: 若对列中的字段进行模糊查询或者语言 ...

  10. Android Studio 在mac下对应的快捷键

    Mac下快捷键的符号所对应的按键⌥-> option|alt⇧->shift⌃->control⌘->command⎋->esc注: 与F6/F7/F12等F功能键开头的 ...