Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

JavaScript jQuery

jQueryのget()メソッドの使い方やパラメーターについて

投稿日:2021年3月27日 更新日:

<目次>

(1) jQueryのget()メソッドの使い方やパラメーターについて
 (1-1) get()メソッドの概要
 (1-2) get()メソッドのサンプルプログラム

(1) jQueryのget()メソッドの使い方やパラメーターについて

(1-1) get()メソッドの概要

jQueryのget()メソッドはHTTPのGETリクエストを用いて、サーバ(の指定したURL)からのデータを取得するために使われます。

■構文

jQuery.get(①url[,②data][,③success][,④dataType])

 

また「jQuery」の部分は省略して「$」と記述できるので、以下も同じ意味になります(以降は「$.get」の形式で書いていきます)。

$.get(①url[,②data][,③success][,④dataType])

 

加えて、「$.get」は「$.ajax」の省略形でもあり、つまり「非同期」(サーバの応答を待たずにクライアント操作可能=非同期)の処理であるという事になります。

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

それぞれの引数①~④の意味は次の通りです。

■引数の説明

①url:String型
リクエスト先のURLをString形式で保持します。Servlet等を指定する事も可能です。
(例)Servlet名を指定
'GetUserServlet'
 
②data:String型/PlainObject型(複数のKey-Valueペアを保持)
リクエストと一緒にサーバに渡されるデータです。
(例)
{[要素のid属性] : [何かの値(JavaScriptの変数とか)]}
 
③success:Function()
リクエストが成功した際に実行されるコールバック関数です。このコールバック関数は戻り値となるデータに渡され、MIMEタイプの値に応じてxml、text、.jsなど様々になります。
 
(例①)
“sample.asp”に対してリクエストを送るのみ(成功しても何もしない)
$.get("sample.asp");
 
(例②)
“sample.asp”に対してリクエストを送り、第二引数のデータを併せて送る(成功しても何もしない)。
$.get("sample.asp", { name:"MyName", address:"Tokyo" });
$.get("sample.asp", { 'fruits', ["Apple","Banana","Cherry"] });

 

④dataType:String
サーバから返却されるデータの型を指定します。指定ない場合は(xml, json, script, text, html)の中から推定します。

(1-2) get()メソッドのサンプルプログラム

jQueryのget()メソッドのURLは「サーブレット」を指定する事が出来るため、画面から入力されたデータをサーブレットに渡して処理し、その結果を即時に画面に反映する、といった処理も可能になります。今回はそのサンプルプログラムをご紹介します。
 
(処理概要)
画面(JSP)から「名前」を入力してボタンを押下すると、下に挨拶メッセージが表示されます。内部的にはボタン押下時に下記の処理が実行されます。
 
・JavaScript処理で今回ご紹介した「get()」メソッドを使用し、更にServletを呼び出し
・Servletにて挨拶メッセージを生成
・get()メソッドのコールバック関数を利用して、Servletの処理結果(挨拶)を画面(JSP)に表示
 
(図121)

■JSP

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Get method example</title>

<%--1つ目のscript:jQueryのライブラリを読み込み--%>
<script src="https://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<%--2つ目のscript:getメソッドを使って挨拶を表示するjsの読み込み--%>
<script src="js/IT0293_jQuery_Get.js" type="text/javascript"></script>
</head>
<body>

        <form>
                お名前を入力してください:<input type="text" id="u_name" />
                <input type="button" value="入力完了" onClick="IT0293_greeting()">
        </form>
        <br>
        <br>
        <strong>Servlet Response</strong>:
        <%-- ボタンを押すと、ここに挨拶が表示されます --%>
        <div id="GetServletResponse"></div>
</body>
</html>

(図122)

■JavaScript

本記事のメインテーマであるjQueryのgetメソッドを含むJavaScriptです。

function IT0293_greeting() {
    /* 画面に入力された名前を取得 */
    var name = $('#u_name').val();
    /* getでサーブレット「IT0293_get」を呼び出し、名前を渡して挨拶を画面に表示 */
    $.get('IT0293_get'
                ,{u_name : name}
                , function(responseText) {
                        $('#GetServletResponse').text(responseText);
                }
    );
}

(図123)

■Servlet

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("/IT0293_get")
public class IT0293_jQuery_Get extends HttpServlet {
        private static final long serialVersionUID = 1L;
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                //名前の入力が無い場合は「Guest User」にする
                String name = request.getParameter("u_name").trim();
                if(name == null || name.equals("")){
                        name = "Guest User";
                }
                //挨拶文の作成
                String sayhello = "Have a nice day " + name;
                //レスポンスに挨拶文を書き込み
                response.setContentType("text/html");
                response.getWriter().write(sayhello);
        }
}
(図124)実行結果

(動画)実行結果イメージ

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-JavaScript, jQuery

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

jQueryの$(document).ready()とは?意味や使い方をご紹介

<目次> (1) jQueryの$(document).ready()とは?意味や使い方をご紹介  (1-1) 「$(document).ready()」とは?  (1-2) サンプルプログラム  ( …

JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法

  <目次> (1) JavaScriptのオブジェクト(object)の書き方やメソッドを追加する方法  (1-1) 構文①:オブジェクト作成  (1-2) 構文②:オブジェクトにアクセス …

no image

JavaScriptのhistory.pushState()とは?

<目次> (1) JavaScriptのhistory.pushState()とは?  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム  (1-4) 使いどころ (1) Jav …

JavaScriptのAddEventListenerの用途や使用例について

<目次> (1) JavaScriptのAddEventListenerの用途や使用例について  (1-1) 概要  (1-2) 構文  (1-3) サンプルプログラム (1) JavaScriptの …

「ブレークポイントは現在の設定ではヒットしません。生成コードが見つからなかったため、ブレークポイントは無視されました」エラーの対処メモ

  <目次> (1) 「ブレークポイントは現在の設定ではヒットしません。生成コードが見つからなかったため、ブレークポイントは無視されました」エラーの対処メモ  (1-1) 発生状況・エラーメ …

  • English (United States)
  • 日本語
Top