liguofeng29’s blog

個人勉強用ブログだっす。

jQuery - Ajax関連 (serialize, load)

Ajax jQuery javascript

・ jQuery.param(obj) - objをリクエストパラメータに変換
・ serialize() - jQueryオブジェクトが含むフォームの要素をリクエストパラメータに変換
・ serializeArray() - jQueryオブジェクトが含むフォームの要素を配列に変換

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> jQuery-serialize </title>
</head>

<body>
    <form id="test">
        商品名<input id="item" name="item" type="text" /><br /> 
        価格<input id="price" name="price" type="text" /><br /> 
        カテゴリ<select id="category" name="category">
                    <option value="01">書籍</option>
                    <option value="02">雑貨</option>
                    <option value="03">食品</option>
                </select>
    </form>
    <button id="bn1">serialize()</button>
    <button id="bn2">serializeArray()</button>
    <button id="bn3">$.param()</button>
    <hr />
    <span id="show"></span>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
        // serialize()
        $("#bn1").click(function() {
            // form要素をリクエストパラメータに変換
            $("#show").html($("#test").serialize());
        });
        // 
        $("#bn2").click(function() {
            // form要素を配列に変換
            var arr = $(":input").serializeArray();
            $("#show").empty();
            for (var index in arr) {
                $("#show").append("第" + index + "の要素名：" + arr[index].name + ",値：" + arr[index].value + "<br />");
            }
        });
        // 
        $("#bn3").click(function() {
            // リクエストパラメータに変換
            $("#show").html($.param({item: "item1", price: 100}));
        });
    </script>
</body>

</html>

f:id:liguofeng29:20160221222617g:plain

・ load(url[,data][,callback]) - 非同期通信を行い、受信データを該当jQueryオブジェクトに直接表示する。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery.load</title>
</head>
<body>
    <form id="test">
        商品<input id="item" name="item" type="text" /><br /> 価格<input
            id="price" name="price" type="text" /><br /> カテゴリ<select
            id="category" name="category">
            <option value="01">書籍</option>
            <option value="02">雑貨</option>
            <option value="03">食品</option>
        </select>
    </form>
    <button id="load">load()</button>
    <hr />
    <span id="show"></span>
    <script type="text/javascript" src="jquery-1.12.0.min.js">

   </script>
    <script type="text/javascript">
       $("#load").click(function() {
           // load
           $("#show").load("loadtest", $("#test").serializeArray());
       });
   </script>
</body>
</html>

import java.io.IOException;
import java.io.PrintWriter;

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(urlPatterns = "/loadtest")
public class LoadTestServlet extends HttpServlet {
    public void service(HttpServletRequest request, HttpServletResponse response)
            throws IOException, ServletException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        // item
        String item = request.getParameter("item");
        String price = request.getParameter("price");

        String[] category = request.getParameterValues("category");

        // HTML出力
        out.println("時刻 : " + new java.util.Date());
        out.println("<br />");
        out.println("商品名 : " + item);
        out.println("<br />");
        out.println("価格 : " + price);
        out.println("<br />");
        out.println("カテゴリID : " + category[0]);
        out.println("<br />");
        out.println("上記内容を登録しました。");
    }
}

f:id:liguofeng29:20160221225427g:plain