JavaScript + jQuery のスニペット - Ajax

投稿日 2015/05/31

[Home] [Index] 

サーバ上のファイルを取得するには

$(document).ready(function() {
  $("#result_load").load(url + "data.txt"); 
});

サーバから GET メソッドでデータを取得するには

サンプル(1)

クライアント側コード

$(document).ready(function() {
  $("#btnGet1").click(function() {
    $.get(cgibin + "jquery_get1.cgi", function(data) {
      $("#result_get1").text(data);
    });
  });
});

サーバ側コード

#!/usr/bin/perl

#use CGI;
use CGI::Carp;

print "Content-Type: text/plain\n\n";
print "jQuery.get OK";
croak "jQuery.get OK";

サンプル(2)

クライアント側コード

$(document).ready(function() {
  $("#btnGet2").click(function() {
    var text = $("#param_get2").val();
    $.get(cgibin + "jquery_get2.cgi", text, function(data) {
      $("#result_get2").text(data);
    });
  });
});

サーバ側コード

#!/usr/bin/perl

use CGI;
use CGI::Carp;

$q = CGI->new;
$text = $q->param('keywords');
if (!defined($text)) {
  $text = "empty";
}
print "Content-Type: text/plain\n\n";
print uc($text);
croak "jQuery.get2 OK " . $q->self_url;

サーバから POST メソッドでデータを取得するには

クライアント側コード

$(document).ready(function() {
  $("#btnPost1").click(function() {
    var text = $("#param_post1").val();
    $.post(cgibin + "jquery_post1.cgi", {text:text}, function(data) {
      $("#result_post1").text(data);
    });
  });
});

サーバ側コード

#!/usr/bin/perl

use CGI;
use CGI::Carp;

$q = CGI->new;
$text = $q->param('text');
if (!defined($text)) {
  $text = "empty";
}
print "Content-Type: text/plain\n\n";
print lc($text);
croak "jQuery.post1 OK " . $q->self_url;

サーバから GET メソッドで JSON 形式データを取得するには

クライアント側コード

$(document).ready(function() {
  $("#btnJSON").click(function() {
    var v = $("#param_json").val();
    $.getJSON(cgibin + "jquery_json.cgi", {value:v}, function(data) {
      $("#result_json").text(data.value);
    });
  });
});

サーバ側コード

#!/usr/bin/perl

use CGI;
use CGI::Carp;

$q = CGI->new;
$value = $q->param('value');
if (!defined($value)) {
  $value = 0;
}
print "Content-Type: application/json\n\n";
$value = $value * 2;
print "{\"value\":\"$value\"}";
croak "jQuery.getJSON OK " . $q->self_url;

サーバからデータを取得するには

クライアント側コード

$(document).ready(function() {
   $("#btnAjax").click(function() {
   var v = $("#param_ajax").val();
   var p = v.split(",")
   $.ajax({url: cgibin + "jquery_ajax.cgi",
          type: "get",
          data: "x=" + p[0] + "&y=" + p[1],
          success: function(msg) {
                   $("#result_ajax").text(msg);
          },
          error: function(status) {
                   $("#result_ajax").text("error");
          }
   });
     });
});

サーバ側コード

#!/usr/bin/perl

use CGI;
use CGI::Carp;

$q = CGI->new;
print "Content-Type: text/plain\n\n";

$x = $q->param('x');
$y = $q->param('y');

$z = $x * $y;
print $z;

croak "jQuery.ajax OK";

 

 


 このページの先頭

 開設 2014年12月   著作権 2014-2015 bonk.red  連絡先: こちらからメッセージを送ってください。 (お仕事も大募集)

 このページの先頭へ..