在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. selenium常用的js总结

    1. 对input执行输入 直接设置value属性, 此方法主要应对输入框自动补全以及readonly属性的element,sendkeys不稳定 比如: //inputbox is a WebEle ...

  2. MySQL 5.7 学习：新增配置参数

    背景: 继上次介绍 初识 MySQL 5.6 新功能.参数完之后,刚好MySQL 5.7又GA了,在官方测试里看到,MySQL5.7在功能.性能.可用性.安全和监控上又提升了很高.现在看看和MySQL ...

  3. iOS整体框架类图

    Cocoa是OS X和iOS操作系统的程序的运行环境. iOS的操作系统层次结构分为四层:触摸UI层,媒体层,核心服务层,核心OS层.其中底层框架提供iOS的基本服务和技术,高层次框架简历在低层次框架 ...

  4. sql之left join、right join、inner join的区别

    sql之left join.right join.inner join的区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括 ...

  5. 网页Loading效果

    问题描述:由于项目要求在页面提交以及加载的时候,有短暂的卡顿,需要用loading过渡. 1.下一个页面加载的时候实现: base-loading.js //获取浏览器页面可见高度和宽度 var _P ...

  6. 《图形学》实验六：中点Bresenham算法画圆

    开发环境: VC++6.0,OpenGL 实验内容: 使用中点Bresenham算法画圆. 实验结果: 代码: #include <gl/glut.h> #define WIDTH 500 ...

  7. 常见开发需求之前端利器webstorm中的git和快捷键

    需求   前端开发中我们最常用的一般是webstorm.hbuilder和sublime,因为以前使用过一段时间eclipse所以我对webstorm的感觉比较良好,再加上以前使用hbuilder维护 ...

  8. Structs框架

    一.准备工作及实例 1.解压struts-2.1.6-all.zip(structs网上下载) apps目录:struts2自带的例子程序 docs目录:官方文档. lib 目录:存放所有jar文件. ...

  9. android 多媒体数据库详解（转）

    转自:http://www.2cto.com/kf/201309/242876.html 主要分为几节: 1. Android的媒体文件内部是如何存储的? 2. Andoid的媒体文件如何获取? 3. ...

  10. PRML读书后记(一): 拟合学习

    高斯分布·拟合 1.1 优美的高斯分布 中心极限定理[P79]证明均匀分布和二项分布在数据量 $N\rightarrow \infty$ 时,都会演化近似为高斯分布. 作为最晚发现的概率分布,可以假设 ...