師匠の散歩Grandmaster Wander

JavaScriptのかけら6

  1. FORM文でデータを渡す

FORM文でデータを渡す

GETで特定ページにデータを渡す

HTMLのForm文でデータをJavaScriptに渡す場合です。

<form action="how2javascript6.html" method="get">
緯度<input type=text name=lat value=12.34>
経度<input type=text name=lng value=56.78>
ズーム<input type=text name=zoom value=10>
<input type=submit value=実行>
</form>
緯度 経度 ズーム

実行するとページのURLアドレスがこのようになります。ここではローカルサーバー(127.0.0.1)のファイルを呼び出しています。

http://127.0.0.1/script/how2javascript4.html?lat=12.34&lng=56.78&zoom=10

ページ内でFORM情報を計算してからGET送信する

師匠の作成するMapでは、経緯度をタブやカンマなどで連結して1つのINPUT要素のデータとすることが多いです。これを経度と緯度に分割してGETデータに送信する方法です。

具体的には、FORM文の情報をJavaScriptで取り込み、URL情報に変形してから、GET送信するという流れです。

<script>
window.onload = function(){
  document.getElementById("sendButton").onclick = function(){ //senButtonのIDのボタンが押されたら
    var url = "./how2javascript6.html";
    var latlng = document.getElementById("Lat").value;
    latlng = latlng.replace(/\t/g," "); //タブとカンマを空白に変換
    latlng = latlng.replace(/,/g," ");
    latlng = latlng.split(' ');
    var lat = latlng[0];
    var lng = latlng[1];
    var ele = document.getElementById("ele").value;
    var zoom = document.getElementById("zoom").value;
    var newUrl = url+"?lat="+lat+"&lng="+lng+"&scl="+zoom + "&ele=" + ele + "#byid";
    window.open(newUrl, "New"); // 新しいウインドーに Url のページを開く
  }
}
</script>

<form>
 <input type="button" id="sendButton" value="地形図Lで描画">
 緯度 経度<input type="text" name="lat" id="Lat" value="35.36061111 138.7273611" size=40>
 縮尺(1-18)<input type="text" name="Zoom" id="zoom" value="14" size=6>
</form>
   緯度 経度  縮尺(1-18)

上記のボタンを押すと、ページURLが記入した内容に変更したので確認してください。

HTMLのForm文で受け取ったデータをJavaScriptの連想配列に格納する

GETデータを連想配列に格納する方法を記述します。

JavaScript(やPerl)の連想配列の良いところは、連想配列を定義する必要があるにして、キーワードや数を先に決めておく必要がなく、あとから再定義も不要なところです。

緯度 経度 ズーム
  // 初期連想配列を定義する
  var param = { lat: '36.560377', lng: '139.193258', zoom: '10' };
  // GETで得たデータを「&」で分割して ma に格納
  var ma = location.search.substr(1);
  if(! ma) {
    ma = 'lat=12.345&lon=67.890&ele=1234&s=16';
    document.write("初期値が入ります\n");
  } else {
    document.write("GETデータが入ります\n");
  }
  ma = ma.split('&');
  for (var i = 0; i < ma.length; i++) {
    // ma の各配列を 「=」で分割して s に格納
    var s = ma[i].split('=');
    // 連想配列に格納、キーワードは s[0]、データは decodeURIComponent(s[1]) に入っている
    param[s[0]] = decodeURIComponent(s[1]);
  }
  document.write("lat="+param.lat+"\n");
  if(param.lng) param.lng = param.lon; // キーワードをlonと書いていても適応する
  if(param.zoom) param.zoom = param.s;
  document.write("lng="+param.lng+"\n");
  document.write("ele="+param.ele+"\n");
  document.write("zoom="+param.zoom+"\n");

GETを使わないデータ受け渡し

GETを使わないでのデータ受け渡しはPOSTを使うのが一般的ですが、JavaScriptで直接データをやりとりすつことができます。

getElementById

ID属性のFORM文のデータを取り込みます。

<input type=text id=draw1 size=5> * <input type=text id=draw2 size=5> = <input type=text id=draw3 size=5>
<script>
document.write( "取り込み結果\n");
document.write( "draw1 = " + document.getElementById("draw1").value);
document.write( " / draw2 = " + document.getElementById("draw2").value);
document.write( " / draw3 = " + document.getElementById("draw3").value);
</script>
 *  = 

XMLHttpRequestを利用する方法

師匠が山行一覧ページなどで、CSVファイルを読み込んでHTMLページに反映させるときの手法です。現在、FireFoxとIE11で確認済みです。

参考にしたのは、AJAXを勉強しようです。

<form name="ajaxForm">
作成:<input type="button" value="実行" onClick="loadDataFile('http://tancro.e-central.tv/grandmaster/script/testAjax.csv')">
<script type="text/javascript"> 
var str_obj = location.href;
var file = str_obj.indexOf("e-central");
//document.write(file);
if (file == -1) {
  document.write('<input type=button value="127.0.0.1版" onClick=loadDataFile("http://127.0.0.1/script/testAjax.csv")>');
}
</script>
</form>

<div id="result"></div>
// JavaScript Ajax test script
// ========================================================================= */
// 参考:http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter03/002/index.html
// ========================================================================= */
function createXMLHttpRequest(cbFunc){
  var XMLhttpObject = null;
  try{
    XMLhttpObject = new XMLHttpRequest();
  }catch(e){
    try{
      XMLhttpObject = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
      try{
        XMLhttpObject = new ActiveXObject("Microsoft.XMLHTTP");
      }catch(e){
        return null;
      }
    }
  }
  if (XMLhttpObject) XMLhttpObject.onreadystatechange = cbFunc;
  return XMLhttpObject;
}
function $(tagId){
  return document.getElementById(tagId);
} 
function loadDataFile(fName){
  httpObj = createXMLHttpRequest(displayData); // var httpObj とするとエラーになった
  if (httpObj){
    httpObj.open("GET",fName,true);
    httpObj.send(null);
  }
}
function displayData(){
  if ((httpObj.readyState == 4) && (httpObj.status == 200)){
    $("result").innerHTML = parseTabText(httpObj.responseText);
  }else{
    $("result").innerHTML = "<em>Loading...少々お待ちください</em>";
  }
}
// =========================================================================
// 表示ルーチン
// =========================================================================
function parseTabText(tabText){

  var count=0;
  var hashTable = [];      // 連想配列の初期化
  var trText = [];         // 配列の初期化
  var resultText="";

  resultText += "<table border='1' cellspacing='0'>";
  resultText += "<tr><th>山</th><th>百</th><th>Lat</th><th>Lon</th><th>Name</th><th>Kana</th><th>height m</th></tr>";

  var CR = String.fromCharCode(13); // 復帰コード (CR)
  var LF = String.fromCharCode(10); // 改行コード (LF)
  var lineData = tabText.split(CR);
  lineData = tabText.split(LF);     // LF・CRで分割して配列 lineDataに格納


  for (var i=0; i < lineData.length; i++){
    csvData = lineData[i].split(",");
    if ((csvData[1] == undefined )||(csvData[0] == "")){ flag=0; continue; } // 読み込みが空白のとき

    trText[count] = "<tr>";
    trText[count] += "<th>"+ csvData[0] + "</th>";
    trText[count] += "<th>"+ csvData[1] + "</th>";
    trText[count] += "<th>"+ csvData[2] + "</th>";
    trText[count] += "<th>"+ csvData[3] + "</th>";
    trText[count] += "<th>"+ csvData[4] + "</th>";
    trText[count] += "<th>"+ csvData[5] + "</th>";
    trText[count] += "<th>"+ csvData[6] + "</th>";
    trText[count] += "</tr>";
    resultText += trText[count];
    count++;
  }
  resultText += "</table>";
  return resultText;
}
  • 実行ページtestAjax.html
  • 注意事項
    Topに戻る // 一覧に戻る
    Copyright(C) Grandmaster since 2010 最終更新:2016/4/21