【Spark Framework】Ajax で form データ送受信する

■ form データ(Get/Post)を受信するには...

request.queryMap() 又は、request.queryParams() から取得可能
...(Request request, Response response) {
  QueryParamsMap map = request.queryMap();
  String userId = map.get("userId").value();
...
  String userId2 = request.queryParams("userId");

■ サンプル

DemoService.java

package com.sample.spark;

import com.sample.spark.controllers.HelloWorldController;

import spark.Service;

public class DemoService {
  public static void main(String[] args) {
    DemoService sparkService = new DemoService();
    sparkService.initialize();
  }

  private Service service;

  private DemoService() {
    this.service = Service.ignite();
  }

  public void initialize() {
    this.service.staticFiles.location("/public");
    
    Gson gson = new Gson();
    HelloWorldController controller = new HelloWorldController();

    // ★注目★
    this.service.get("/forGetMethod", controller::receiveForGetMethod);
    this.service.post("/forPostMethod", controller::receiveForPostMethod);

    this.service.get("/stop", (request, response) -> {
      // Server stop!
      this.service.stop();
      return null;
    });
  }
}

HelloWorldController.java

package com.sample.spark.controllers;

import spark.QueryParamsMap;
import spark.Request;
import spark.Response;

public class HelloWorldController {
  public String receiveForGetMethod(Request request, Response response) {
    System.out.println("Get method");
    return this.receive(request, response);
  }
  public String receiveForPostMethod(Request request, Response response) {
    System.out.println("Post method");
    return this.receive(request, response);
  }

  // ★注目★
  private String receive(Request request, Response response) {
    QueryParamsMap map = request.queryMap();
    try {
      String userId = map.get("userId").value();
      String userName = map.get("userName").value();

      String userId2 = request.queryParams("userId");
      String userName2 = request.queryParams("userName");
      return "userId : " + userId + " userName : " + userName +
          " userId2 : " + userId2 + " userName2 : " + userName2;
    } catch (Exception ex) {
      return "Error: " + ex.getMessage();
    }
  }
}

sampleform.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello World</title>
<script type="text/javascript"
  src="">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<script src="./js/customAjax.js" type="text/javascript"></script>
</head>
<body>
  <h1>Hello World!</h1>
  <form>
    <fieldset>
      <p>ID</p>
      <input type="text" name="userId" id="userId">
      <p>Name</p>
      <input type="text" name="userName" id="userName">
      <input type="button" id="buttonWithGet" value="With Get">
      <input type="button" id="buttonWithPost" value="With Post">
    </fieldset>
  </form>
  <br>
  <p>
    Result: <span id="result"></span>
  </p>
</body>
</html>

customAjax.js

$(function() {
  $('#buttonWithGet').click(function(){
    var userId = $('#userId').val();
    var userName = $('#userName').val();

    $.ajax({
      url: '/forGetMethod?userId=' + userId + '&userName=' + userName,
      success: function(result) {
        $('#result').text(result);
      }
    });
  });
  
  $('#buttonWithPost').click(function(){
    var userId = $('#userId').val();
    var userName = $('#userName').val();
    var json = {'userId': userId, 'userName': userName };
    $.ajax({
      method: 'POST',
      data: json,
      url: '/forPostMethod',
      success: function(result) {
        $('#result').text(result);
      }
    });
  });
});

出力結果

ブラウザを立ち上げて、以下のURLにアクセスする 
[[http://localhost:4567/sampleform.html]]


関連記事

【Spark Framework】初期設定 ~ 環境構築(Gradle Project)からHello Worldまで / 新版 ~

https://blogs.yahoo.co.jp/dk521123/37204914.html

【Spark Framework】REST API + knockout.jsを使って データバインドする

https://blogs.yahoo.co.jp/dk521123/37208334.html