Ajaxでphp型に返す

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Stopwatch</title>
  <link rel="stylesheet" href="styles.css">
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
</head>
<body id="timers">
    <div id="timer">00:00.000</div>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <button id="reset">Reset</button>
    <select name="mintus" id ="mintus" class="mintus">
      <option value="time_1" id="time1">30</option>
      <option value="time_2" id="time2">60</option>
      <option value="time_3" id="time3">90</option>
    </select>
    <button id="timeway">TimeWay</button>
    <div class="sum_way2">
      <div id="sum_way" class="sum_way"></div>
    </div>
    <div>
      <button id="sum">計算</button>
      <div id="sum_account" ></div>
      <button id="php">php</button>

    </div>
  <script src="main.js"></script>
  </script>
</body>
</html>

main js

'use strict';
{
  var timeoutways =[];
  const timer = document.getElementById('timer');
  const start = document.getElementById('start');
  const stop = document.getElementById('stop');
  const reset = document.getElementById('reset');
  const mintus = document.getElementById('mintus');
  const math = document.getElementById('sum');
  const sum_account = document.getElementById('sum_account');
  const timeway = document.getElementById('timeway');
  const sum_way = document.getElementById('sum_way');

  let startTime;
  let timeoutId;
  let elapsedTime = 0;


  function countUp() {
    const d = new Date(Date.now() - startTime + elapsedTime);
    const m = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    const ms = String(d.getMilliseconds()).padStart(3, '0');
    timer.textContent = `${m}:${s}.${ms}`;

    timeoutId = setTimeout(() => {
      countUp();
    }, 10);
  }

  function setButtonStateInitial() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = true;
  }

  function setButtonStateRunning() {
    start.disabled = true;
    stop.disabled = false;
    reset.disabled = true;
  }

  function setButtonStateStopped() {
    start.disabled = false;
    stop.disabled = true;
    reset.disabled = false;
  }

  // 残り時間の計算
  function calculateRemaining() {
    let timeTxt = timer.textContent.replace(":", "").replace(".", "");
    const timeresult = mintus.value;
    switch(timeresult) {
      case 'time_1':
        const result1 = String(3000000 - timeTxt);
        reguler(result1);
         break;
      case 'time_2':
        const result2 = String(6000000 - timeTxt);
        reguler(result2);
        break;
      case 'time_3':
        const result3 = String(9000000 - timeTxt);
        reguler(result3);
        break;
      }
  }
    //正規表現
    function reguler(regular) {
        const regulation = /(\d{2})(\d{2})(\d{3})/;
        const timemath = regular.replace(regulation,'$1分$2秒$3');
        sum_account.innerHTML = timemath;
    }

    // 途中経過の時間表示
    function way(){
      let timeTxt = timer.textContent.replace(":", "").replace(".", "");
      const regulation2 = /(\d{2})(\d{2})(\d{3})/;
      const timemath2 = timeTxt.replace(regulation2,'$1分$2秒$3');
      timeoutways.push(timemath2);
      sum_way.innerHTML=`<ul><input>${timeoutways.join("<ul></ul><input>")}</ul>`;
    }

  
  setButtonStateInitial();

  start.addEventListener('click', () => {
    setButtonStateRunning();
    startTime = Date.now();
    countUp();
  });

  stop.addEventListener('click', () => {
    setButtonStateStopped();
    clearTimeout(timeoutId);
    elapsedTime += Date.now() - startTime;
  });

  reset.addEventListener('click', () => {
    setButtonStateInitial();
    timer.textContent = '00:00.000';
    elapsedTime = 0;
  });


  math.addEventListener('click', () => {
    stop.click();
    calculateRemaining();
  });

  timeway.addEventListener('click', () => {
     way();    
    });

    var timers = document.getElementById("timers")

    // ajax処理
    $(function () {
      $('#php').click(function(){
        $.ajax({
          url:"more.php",
          type:"post",
          dataType:"json",
          data:{'timer':$("#timer").val()}
        }).done(function(response){
          let arrye  = JSON.parse(response);
          alert(arrye);
        }).fall(function() {
          alert('not');
        })
      })
    })
    

}

more.php
<?php

$timer = $_POST('timer');

$arrye = [$timer];
echo json_decode($arrye);

現状行いたいこととしては、今のツールがjavascriptで時間の表示しか行われていないので、
表示の値をPHPというボタンを押したら、BDやテキストに格納され、新しい時間管理が行われることをしたい。

その一歩としてajaxを通してtimerの値をｐｈｐ型で返すことを今行なっています。
doneの部分にalertを設置した場合、表示されますが、値を入れた変数などが帰って来ず、苦戦中です。

何か知見や、web上に近いものをお教えください、よろしくお願いします。

thyda.eiqau

2020/11/15 02:53

php型って何ですか？

kobayashi.j

2020/11/15 02:55

すいません。 phpの言語で値を返すっということです

m.ts10806

2020/11/15 03:52

値を入れた変数などが帰って来ずなにが返ってきてるのでしょう。 JavaScript、PHPともにデバッグしてください

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

回答2件

$("#timer").val()

「#timer」はdivなのでvalueはもっていないのでは？
$("#timer").text()とか・・・・

投稿2020/11/15 03:53

yambejp

総合スコア114833

ベストアンサー

処理がどこで止まっているのか、一歩ずつ確認しましょう。
「doneの部分にalertを設置した場合、表示され」るのであれば、Ajaxの通信は発生しているということなので、確認ポイントはその先にあります。

js
1// ajax処理
2$(function () {
3  $('#php').click(function(){
4    $.ajax({
5      url:"more.php",
6      type:"post",
7      dataType:"json",
8      data:{'timer':$("#timer").val()}
9    }).done(function(response){
10      console.log(response); // ここでresponseの中身が期待とあっているか確認する
11      let arrye  = JSON.parse(response);
12      alert(arrye);
13    }).fall(function() {
14      alert('not');
15    })
16  })
17})
18// そもそもここまでvanillaだったのに唐突にjQueryになっているのも気になりますが……

php
1<?php
2
3$timer = $_POST('timer');
4var_dump($timer); // 渡された値が期待とあっているか確認する
5
6$arrye = [$timer];
7var_dump($arrye); // JSONにする前の値が期待とあっているか確認する
8echo json_decode($arrye);