根據URL動態加載HTML

Question

背景：我正在使用Vert.X用Java編寫一個小型Web服務器。 到目前為止，所有這些都有效。 當前，Web服務器基本上是充當具有一些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數據以填寫表單？ 我不會為任何幻想而射擊； 表單大部分是靜態的：一個文本框，一個日期選擇器以及其他一些字段，僅此而已。 使用“接受”類型的application / json從相同的URL加載JSON數據應返回我可以在JS / HTML中使用的參數以填寫表格-我唯一的問題是，如何將請求返回給我服務器何時加載HTML？ 我怎么知道挑戰ID？

Answer 1

您所描述的是一種“ REST方式”，一個端點根據標頭提供不同的輸出，但是大多數框架都不那樣做。 在Ruby on Rails之類的框架中，輸出由后綴定義：.html，.json

但讓我們假設這仍然是我們想要做的：

1. 如果Accept：標頭為JSON，則返回JSON
2. 否則，返回HTML
3. 在HTML中，提取一些URL參數，並將其發送以獲取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>