Question

背景：我正在使用Vert.X在Java中编写一个小型Web服务器。到目前为止所有这些都有效。目前，Web服务器基本上充当app-server，只有几个GET / POST端点只返回或使用JSON。

我现在需要为此服务器添加一些简单的UI。本着RESTfulness的精神，我想保持我的URL清洁，并根据请求中的Accept：字符串适当地返回数据。例如，如果您从浏览器http://www.example.com/challenge/fdb123-aa12345-cbbad12-12345请求它，则应尝试使用该GUID加载质询并适当显示HTML表单。如果您从命令行执行此操作并指示您接受JSON，则应返回JSON。

我的问题是：我如何编写HTML以提取challenge-id然后将ajax查询返回到我的服务器以获取填写表单的JSON数据？我不是为了任何幻想而拍摄的;表单主要是静态的：文本框，日期选择器以及其他一些字段，就是这样。使用“accept”类型的application / json从相同的URL加载JSON数据应该返回我可以在我的JS / HTML中使用的参数来填写表单 - 我唯一的问题是，如何将该请求返回给我我加载HTML时服务器？我如何知道挑战ID？

Answer 1

您所描述的是“REST方式”，一个端点根据标头提供不同的输出，但大多数框架不会这样做。在像Ruby on Rails这样的框架中，输出由后缀：.html，.json

定义

但我们假设这仍然是我们想做的事情：

如果Accept：标头是JSON，则返回JSON
否则，请返回HTML
在HTML中，提取一些URL参数，并将其发送到get JSON

好的，我们走了：

final Vertx vertx = Vertx.vertx();

final Router router = Router.router(vertx);

router.route("/challenge/:id").produces("text/html").handler(ctx -> {
    ctx.response().sendFile("index.html");
});

router.route("/challenge/:id").produces("application/json").handler(ctx -> {
    final String id = ctx.request().getParam("id");
    final Map<String, String> res = new HashMap<>();
    res.put("challenge", id);
    ctx.response().end(Json.encode(res));
});

vertx.createHttpServer().requestHandler(router::accept).listen(8080, r -> System.out.println("Ready"));

您的客户可能如下所示：

<script>
  $(function() {
    var path = document.location.pathname.split("/")
    var id = path[path.length - 1]
    $.ajax({
      headers: {
        // If you don't limit headers, it will send Accept: */*
        Accept: "application/json"
      },
      url: "/challenge/" + id,
      success : function(res) {
        console.log(res)
      }})
  })
</script>

基于URL动态加载HTML

1 个答案: