monacaで実装したjavascript処理の結果をサーバーに送りたい。

monacaで、BLEセンサーからデータを読み込むまでは、動作するようになりました。
その結果を任意のサーバーへ送りたいのですが、どの様な方法があるか教えて下さい。

因みに、サーバー側に下記のコードを書き、

php
1
2  if(isset($_POST["prm0"])){
3    $data[0] = $_POST["prm1"];
4  }
5
6  if(isset($_POST["bPl"])){
7    $data[1] = $_POST["bPl"];
8  }
9
10  if(isset($_POST["bPs"])){
11    $data[2] = $_POST["bPs"];
12  }
13以下略…

携帯側に下記のコードを書けば、当然なのだと思いますが、データを転送できました。

html
1前略…
2<form action="https://myserver-url/tst/index.php" method="post">
3<p><label>データ１：<input type="text" name="prm0" size="40"></label></p>
4<p><label>データ２：<br><textarea name="prm1" rows="2" cols="40"></textarea></label></p>
5<p><label>データ３：<br><textarea name="prm2" rows="2" cols="40"></textarea></label></p>
6<p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
7</form>

ですが、javascriptで、取得し変数に入れたデータをpostで送るにはどのようにすれば良いのか分かりません。
monacaもjavascriptもHTMLも学習中の初心者ですが、携帯からサーバーへデータを送る方法を教えて下さい。
宜しくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScriptのライブラリであるaxiosをおすすめしておきます

使い方(ググって最初に出たページですが・・・)
https://qiita.com/taroc/items/f22f7dd5d6d5443c72a4

投稿2018/08/16 07:10

rururu3

総合スコア5545

bugbug

2018/08/16 08:16

早速の御解答有難う御座います。　現在、移動中なのですが、PCの前に座ったら、直ぐにチャレンジしてみます。ちなみに、バリアブルをファイルに書き、cordova-plugin-file, cordova-plugin-file-transfer, のサンプルコードから送信でft.”upload(fileURL, encodeURI("http://myserver…/upload.php"), win, fail, options);などと言うファンクションを使ってみようとも思ったのですが、"fileURL"の取得方法が分からず、こちらは、断念しています。

bugbug

2018/08/16 14:12

時間かかりましたが、試してみました。有難うございます。　まだ、本プログラムのjavascriptとは、連携していませんが、お勧めの方法で、javascript内の変数をPOST出来そうです。幾つか問題は有るのですが、ひとまず今日の変更で、なんとかなりそうです。有難う御座いました。経過は、別スレッドで書かさせて頂きます。

行動規範の内容に同意します

コメントを頂き、検証してみました。

まだ、BLEのイベントコントロールの入ったターゲットソースでは試していませんが、なんとかなりそうです。
コメント有難う御座いました。　低レベルなところで、戸惑っているようですが、今後とも宜しくお願いします。

サーバー側は、無駄な処理は承知で、こんな感じに書いています。

HTML5ベース
<?php
$prm0 = 0;
$prm1 = 0;
$prm2 = 0;
  if(isset($_POST["data0"])){
    $prm0 = $_POST["data0"];
  }

  if(isset($_POST["data1"])){
    $prm1 = $_POST["data1"];
  }

  if(isset($_POST["data2"])){
    $prm2 = $_POST["data2"];
  }

$now = time();
$now = date('Y/m/d H:i:s' , $now);

$d0 = $prm0;
$d1 = $prm1;
$d2 = $prm2;

$now = $now.','.$d0.','.$d1.','.$d2.'*E.O.T*';

$FP = fopen("./tmp/getdata.csv" , "a");
  fwrite( $FP , $now );
  fclose( $FP );
?>
<!DOCTYPE html>
<html lang="ja" >
  <head>
    <meta charset="UTF-8" >
  </head>
  <body>
    <p><h2>データ記録完了</h2></p>
    <p>
      <input type="button" value="戻る" onclick="history.back()">
    </p>
  </body>
</html>

```

Monaca 携帯側のHTMLヘッダーにこう書きました。
```
  <script>
    // Page init event
    document.addEventListener('init', function(event) {
      var page = event.target;

      if (page.matches('#first-page')) {

        page.querySelector('#push-button').onclick = function() {
          document.querySelector('#navigator').pushPage('page2.html');
        };

      } else if (page.matches('#second-page')) {

        page.querySelector('#pop-button').onclick = function() {
          document.querySelector('#navigator').popPage();
        };
      }
    });
  </script>
  <script>
    function sendMsg() {
      var pData = new Array('1st','2nd','3ed')
      let params = new URLSearchParams();
      params.append('data0', pData[0]);
      params.append('data1', pData[1]);
      params.append('data2', pData[2]);
      axios.post('https://sss.bglb.jp/tst/test.php', params)
     .then(response => {
      console.log('送信完了');
    }).catch(error => { console.log(error); });
    };
  </script>

```HTML

<body>部は、テンプレートを残しながら、
```HTML5ベース
<ons-template id="page2.html">
    <ons-page id="second-page">
      <ons-toolbar>
        <div class="left"><ons-back-button>Page 1</ons-back-button></div>
        <div class="center">Page 2</div>
      </ons-toolbar>

      <div class="content" style="text-align: center">
        <p>This is the second page.</p>

        <button onclick="sendMsg()">計測値送信</button>

        <form action="https://myserver…/test.php" method="post">
　　　　  <p><label>Data0：<input type="text" name="data0" size="40"></label></p>
         <p><label>Data1：<br><textarea name="data1" rows="1" cols="40"></textarea> </label></p>
         <p><label>Data2：<br><textarea name="data2" rows="1" cols="40"></textarea></label></p>
          <p><input type="submit" value="送信"><input type="reset" value="リセット"></p>
        </form>
        <ons-button id="pop-button">Pop page</ons-button>
      </div>
    </ons-page>
  </ons-template>

```

で、結果は、サーバー側でこんな感じになりました。

```shell
$ cat getdata.csv
2018/08/18 08:27:49,1st,2nd,3ed$

```

解決方を教えて頂き、おかげさまで目的の処理を実装できたようです。
有難う御座いました。

投稿2018/08/16 14:35

編集2018/08/18 00:14

bugbug

総合スコア20