jQuery - Ajax関連 (jQuery.get(), jQuery.post())
jQueryは簡易的な方法で非同期通信のget,postを送信できる。
GET
jQuery.get(url[,data][,callback][,type])
- jQuery.getJSON(url[,data][,callback]) - type = json
- jQuery.getScript(url[,data][,callback]) - type = script
POST
jQuery.post(url[,data][,callback][,type])
- 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("上記内容を登録しました。"); } }