jQuery Ajax
概è¦
Asynchronous JavaScript + XML
éžåŒæœŸé€šä¿¡
JavaScriptを使用ã—ã€ãƒšãƒ¼ã‚¸å…¨ä½“ã®å†ãƒãƒ¼ãƒ‰ã‚’行ã‚ãšã«XMLデータã ã‘をやりå–りã™ã‚‹æŠ€è¡“
$.get(url, params, callback, type);
$.post(url, params, callback, type)
$ajax(url, options);
load()
$(~).load(url, data, complete(data, textStatus, xhr));
urlã§æŒ‡å®šã—ãŸãƒªã‚½ãƒ¼ã‚¹ã‚’Ajaxã§èªã¿è¾¼ã¿ã€è¦ç´ ã«æ ¼ç´
$(~).load("http://test.html");
↑urlã«ãƒ‘ラメーターを渡ã™
$(~).load("http://test.html", "prm1=aaa&prm2=bbb");
$(~).load("http://test.html", { prm1:"aaa", prm2:"bbb"});
↑èªã¿è¾¼ã¿å®Œäº†å¾Œã‚³ãƒ¼ãƒ«ãƒãƒƒã‚¯é–¢æ•°ã‚’指定
$(~).load("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  $("#log").append("status = " + status + "<br/>");  //errorç‰
  $("#log").append("xhr.status = " + xhr.status + "<br/>");  404ç‰
  $("#log").append("xhr.statusText = " + xhr.statusText + "<br/>");  Not Foundç‰
});
get()
load()ã¨é•ã„æˆ»ã‚Šå€¤ãŒãªã„。
$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
});
$.get("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
}).done(function(data, status, xhr){
  $("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
  $("#log").append("failed<br/>");
});
post()
$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
});
$.post("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  if (status == "success") {
    $(#result).html(data);
  }
}).done(function(data, status, xhr){
  $("#log").append("Done<br/>");
}).fail(function(data, status, xhr){
  $("#log").append("failed<br/>");
});
getJSON()
dataãŒJSONå½¢å¼ã§è¿”ã£ã¦ãã‚‹
$.getJSON("http://test.html", {prm1:"a", prm2:"b"}, function(data, status, xhr){
  $.each(data, function(key, val){
    $("#log").append("Data:" + key + "=" + val + "<br/>");
  });
})
汎用
éžåŒæœŸé€šä¿¡
$(document).ready(function(){
 $('#add_cart').click(function(){
  /**
  * Ajax通信メソッド
  * @param type : HTTP通信ã®ç¨®é¡ž
  * @param url  : リクエストé€ä¿¡å…ˆã®URL
  * @param data : サーãƒã«é€ä¿¡ã™ã‚‹å€¤
  */
  $.ajax(
  {
   type: "POST", GETã‚‚å¯
   dataType: "json", TEXTã€HTMLç‰ã‚‚å¯
   contentType: 'application/json', 他タイプもå¯
   url: "http://test.com/",
   data:
   {
    "id":5,
   },
   success: function(data)
   {
    alert(data.count);
   },
   error: function(XMLHttpRequest,textStatus,errorThrown)
   {
    alert('処ç†ã§ãã¾ã›ã‚“ã§ã—ãŸ');
   },
  });
  return false;
 });
});
åŒæœŸé€šä¿¡
$(document).ready(function(){
  function test(){
    /**
    * Ajax通信メソッド
    * @param type : HTTP通信ã®ç¨®é¡ž
    * @param url  : リクエストé€ä¿¡å…ˆã®URL
    * @param data : サーãƒã«é€ä¿¡ã™ã‚‹å€¤
    * @param async : éžåŒæœŸé€šä¿¡
    */
    return $.ajax(
    {
     type: "POST", GETã‚‚å¯
     dataType: "json", TEXTã€HTMLç‰ã‚‚å¯
     contentType: 'application/json', 他タイプもå¯
     url: "http://test.com/",
     data:
     {
      "id":5,
     },
     async: false
    }).responseText;
   });
  }
  
  $('#add_cart').click(function(){
  
   var result = test();
  
   if (result != 0) {
    var ret = window.confirm('カートã«ã¯åŒå•†å“を登録ãšã¿ã§ã™ã€‚è¿½åŠ ã—ã¾ã™ã‹ï¼Ÿ');
    if (ret) {
     return true;
    }else{
     return false;
    }
   }
  });
});