JavaScriptからJavaにデータを送信

  • 2019年4月29日
  • 2020年6月16日
  • jQuery
やりたい事はJavaScript(クライアントサイド)からJava(サーバーサイド)への値の受け渡しになります。
jQueryのajaxを使って送信します。

HTML

<div class="content">
  <button id="ajaxTest">「あいうえおを」javaに送信</button>
</div>

ボタンを1つ定義し、idを「ajaxTest」としています。
このボタンが押されるとjavaに値が送信されるように
次のようにJavaScriptを書いていきます。

JavaScript

$('#ajaxTest').on('click', function(){
  $.ajax({
    url : 'Servlet',
    type : 'POST',
    data : {data1 : 'あいうえお'},
    success : function(response) {
      alert(response);
    },
    error : function() {
      console.log('通信エラーです');
    }
  })
})

セレクタがボタンのid名になっているのがわかると思います。
urlではサーブレットクラスの@WebServletアノテーションに
書かれているものとあわせます。

まともな技術者はSIerには行ってはいけない

今回ajaxの方でスラッシュは不用です。
POST送信とし、送信するデータは「あいうえお」です。
successには通信成功時の処理、errorには通信失敗時の処理を書きます。

Java

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String fromAjax = request.getParameter("data1");
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("「" + fromAjax + "」" + "を受信しました");
    }

}
getParameterメソッドの引数にajaxで指定したkeyを渡せば
「あいうえお」を取得することができます。コンテンツタイプを
設定し、通信成功時には「「あいうえお」を受信しました」と表示されます。