Quantcast
Channel: プログラム の個人的なメモ
Viewing all articles
Browse latest Browse all 860

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

$
0
0

■ form データを受信するには...

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.google.gson.Gson;
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(ServiceConfig config) {
    this.service = Service.ignite();
  }

  public void initialize() {
    this.service.staticFiles.location("/public");

    Gson gson = new Gson();
    HelloWorldController controller = new HelloWorldController();

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

HelloWorldController.java

package com.sample.spark.controllers;

import java.util.ArrayList;
import java.util.List;

import com.sample.spark.models.Person;

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

public class HelloWorldController {
  public 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><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="buttonSubmit" value="submit"></fieldset></form><br><p>
    Result: <span id="result"></span></p></body></html>

customAjax.js

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

    $.ajax({
      url: '/receive?userId=' + userId + '&userName=' + userName,
      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

Viewing all articles
Browse latest Browse all 860

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>