liguofeng29’s blog

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

jQuery - Ajax関連 (jQuery.get(), jQuery.post())

Ajax javascript jQuery

jQueryは簡易的な方法で非同期通信のget,postを送信できる。

GET

  • jQuery.get(url[,data][,callback][,type])

    • type : xml, json, script, text, html
  • jQuery.getJSON(url[,data][,callback]) - type = json
  • jQuery.getScript(url[,data][,callback]) - type = script

POST

  • jQuery.post(url[,data][,callback][,type])

    • type : xml, json, script, text, html
  • jQuery.postJSON(url[,data][,callback]) - type = json
  • jQuery.postScript(url[,data][,callback]) - type = script

jQuery.ajax(options)と jQuery.ajaxSetup(options)

  • ajax通信のすべてを制御できる
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery的get方法</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="get">jQuery.get()</button>
    <hr />
    <div id="show"></div>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
       $("#get").click(function() {
       // get
       $.get("gettest" , $("#test").serializeArray() ,
           // callback
           function(data , statusText) {
               $("#show").empty();
               $("#show").append("サーバレスポンス：" + statusText + "<br />");
               $("#show").append(data);
           },
           // typeはhtml
           "html");
       });
</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 = "/gettest")
public class GetServlet 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:20160221231731g:plain