質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • PHP

    24023questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20383questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1326questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

ajaxでpostを送るも実際に送れられていない

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 209

rms398

score 30

 前提・実現したいこと

phpでonclickに数字2つをjavascriptに送ってajaxで指定のurlにpostを送ろうとする処理を作っています
ajaxでpostを送信して成功することができたのですが、なぜかpostが送られていませんでした

なぜpostが送られていないのでしょうか

 発生している問題・エラーメッセージ

Notice: Undefined index: human in /.../ReservationConfirmation.php on line 51

Notice: Undefined index: in /.../ReservationConfirmation.php on line 51

Notice: Undefined index: price in /.../ReservationConfirmation.php on line 52

 該当のソースコード

main.php

<body>
    <form method="post" action="main.php">
      <table id="pr">
      <?php 
        for($i = 1; $i <= 5; $i++){
          echo "<tr id='line" . $i . "'>";
          if($i == 1){
            echo "<td id='people" . $i . "' class='people'><button type='button' class='select active' name='rate' onclick='window.rateChange(" . ($i-1) . ")'><img src='" . $imgsrc[$i-1] . "'></button></td>";
            for($j = 1; $j <= 5; $j++){
              $index = ($i-1) * 5 + $j;
              $sumprice[$index-1] = $price[$index-1];
              $ticket = 1;
              echo "<td id='price" . $index . "' class='price'><input type='button' id='prva" . $index . "' value='" . $sumprice[$index-1] . "' onclick='reserConfir(" . ($i-1) . "," . ($index-1) . ")'></td>";
            }
          }else{
            echo "<td id='people" . $i . "' class='people'><button type='button' class='select' name='rate' onclick='window.rateChange(" . ($i-1) . ")'><img src='" . $imgsrc[$i-1] . "'></button></td>";
            for($j = 1; $j <= 5; $j++){
              $index = ($i-1) * 5 + $j;
              $sumprice[$index-1] = $price[$index-1];
              $ticket = 1;
              echo "<td id='price" . $index . "' class='price'><input type='button' id='prva" . $index . "' value='" . $sumprice[$index-1] . "' onclick='reserConfir(" . ($i-1) . "," . ($index-1) . ")'></td>";
            }
          }
          echo "</tr>";
        }
      ?>
        <tr id="line6">
          <td id="people6" class="people"><button type="button" class="select" name="rate" onclick="window.rateChange(5)"><img src="img/AdultChild2.png"></button></td>
        </tr>
        <tr id="line7">
          <td id="people7" class="people"><button type="button" class="select" name="rate" onclick="window.rateChange(6)"><img src="img/Child.png"></button></td>
        </tr>
        <tr id="line8">
          <td id="people8" class="people"><button type="button" class="select" name="rate" onclick="window.rateChange(7)"><img src="img/Child2.png"></button></td>
        </tr>
      </table>
    </form>
  </div>
</body>
</html>
<?php
  }else{
    header('Location: login.php');
  }
?>
<script>
//クリックした時
var price = <?php echo json_encode($price); ?>;
var sumprice = <?php echo json_encode($sumprice); ?>;
var ticket = <?php echo json_encode($ticket); ?>;
var img = $('.select');
function rateChange(rc){
  console.log('通った' + rc);
  for(var i=0; i<25; i++){
    switch(rc){
      case 0:
        sumprice[i] = price[i] * 1;
        ticket = 1;
        break;
      case 1:
        sumprice[i] = price[i] * 2;
        ticket = 2;
        break;
      case 2:
        sumprice[i] = price[i] * 3;
        ticket = 3;
        break;
      case 3:
        sumprice[i] = price[i] * 1 + Math.floor(price[i] / 20) * 10;
        ticket = 2;
        break;
      case 4:
        sumprice[i] = price[i] * 2 + Math.floor(price[i] / 20) * 10;
        ticket = 3;
        break;
      case 5:
        sumprice[i] = price[i] * 1 + Math.floor(price[i] / 20) * 10 * 2;
        ticket = 3;
        break;
      case 6:
        sumprice[i] = Math.floor(price[i] / 20) * 10;
        ticket = 1;
        break;
      case 7:
        sumprice[i] = Math.floor(price[i] / 20) * 10 * 2;
        ticket = 2;
        break;
      default:
        sumprice[i] = 666;
        break;
    }
    console.log('for');
    $("#prva" + (i+1) + "").val(sumprice[i]);
  }
}
img.click(function(){
  img.removeClass('active');
  $(this).addClass('active');
});
function reserConfir(human,index){
  //ajax送信
  $.ajax({
    type : "POST",
    //ajaxが適切なcontentTypeに自動変換するのを防ぐ
    contentType: false,
    //データを文字列に自動変換するのを防ぐ
    processData: false,
    url : "./ReservationConfirmation.php",
    data : {human:human, price:sumprice[index]},
    error : function(XMLHttpRequest, textStatus, errorThrown) {
      console.log(XMLHttpRequest + " : " + textStatus + " : " + errorThrown);
    },
    success : function(response) {
      console.log("ajax通信に成功しました" + response);
      document.write(response)
    }
  });
}


ReservationConfirmation.php

<?php
  $human = array (
      "大人1人","大人2人","大人3人","大人1人小人1人","大人2人小人1人","大人1人小人2人","小人1人","小人2人"
  );
  if(!isset($_SESSION)){ 
    session_start();
  }  
  if(isset($_SESSION['id'])){
    $DBManager = new DBManager();
    $Data = $DBManager->getUserInfoTblByUserID($_SESSION['id']);
    if(isset($_POST['logout'])){
      logout();
    }
    if(isset($_POST['answer'])){
      switch($_POST['answer']){
        case "はい":
        case "いいえ":
          header('Location: main.php');
          break;
        default:
          break;
      }
    }
?>
<html>
<head>
  <meta http-equiv="Content -Type" content="text/html;charset=UTF-8">
  <title>完了画面</title>
  <script type="text/javascript" src="./js/jquery.min.js"></script>
  <script type="text/javascript" src="./js/jquery-3.0.0.min.js"></script>
  <script type="text/javascript" src="./js/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="header">
      <div id="text">切符予約</div>
      <div id="text2">予約したい希望の切符を選んでください</div>
    </div>
    <div id="account">
      <div id="user_name"><?php echo $_SESSION['id'] . "様"; ?></div>
      <form method="post" action="ReservationConfirmation.php">
        <input type="submit" name="information" value="顧客情報">
        <input type="submit" name="logout" value="ログアウト">
      </form>
    </div>
    <form method="post" action="ReservationConfirmation.php">
    <div id="confirmation">
      <div id="text3">こちらの内容で予約しますか?</div>
      <div id="humam"><?php echo $human[$_POST['human']]; ?></div>
      <div id="sumprice"><?php echo $_POST['price']; ?></div>
      <div id="yes"><input type="submit" name="answer" value="はい"></div>
      <div id="no"><input type="submit" name="answer" value="いいえ"></div>
</body>
</html>
<?php
  }else{
    header('Location: login.php');
  }
?>

 補足情報(FW/ツールのバージョンなど)

XAMPP for Windows 5.6.19

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/11/30 13:24

    「送信して成功することができた」「送られていませんでした」というのはどのように確認したのでしょうか?

    キャンセル

回答 2

+2

ajaxの成功時のdocument.write(response)はまずくないですか?
console.logなどバックグラウンドにデータを吐いてみて下さい

 調整

function reserConfir(human,index){
  var fd=new FormData();
  fd.append("human",human);
  fd.append("price",sumprice[index]);
  console.log(...fd);
  $.ajax({
    type : "POST",
    contentType: false,
    processData: false,
    url : "./ReservationConfirmation.php",
    data : fd,
  }).done(function(response) {
      console.log("ajax通信に成功しました" + response);
      document.write(response);
  }).fail(function(xhr, err){
    console.log(err);
  });
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/03 10:30

    吐いてみた結果も上記のPOSTの'human' 'price'がないというエラーです
    javascriptで送ったpostを利用して値段や購入人数状態を表示して予約確認の画面を出さなければならないのですがajaxでは無理なのでしょうか?

    キャンセル

  • 2018/12/03 10:47

    $.ajax()の実行される1行前に、console.log(human)、console.log(sumprice[index])などで
    想定されたデータが設定されているか確認してください
    ここでうけとれてなければ当然postされることはありません

    キャンセル

  • 2018/12/03 11:14

    データはちゃんと入っていました
    データの受け渡すときのdata : {human:human, price:sumprice[index]},という書き方がよくないんでしょうか?

    キャンセル

  • 2018/12/03 11:36

    dataにformdataを利用してみてください。調整版を追記しておきました

    キャンセル

  • 2018/12/03 13:30

    そういえば、前の開発でformdata使っていたことがありました
    postが遅れていなかったのはそういうことだったんですね
    あと、他の回答者様の助言でajax以外の方法で無事送信できましたので
    ajaxの件は今後の開発でformdataを利用することを頭の隅に置いておきます

    キャンセル

checkベストアンサー

+1

ajaxは基本的に画面に対してリクエストを送る仕組みではないので送信先の画面で確認という手段にはなりませんよ。
リクエストを受け取ったらレスポンスデータを 例えばjson形式などで返すようにして送信元のJavaScriptで受けとるだけです。
送信先phpに届いたかどうかは実行時にログファイルに書き出して実行後に確認とかになります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/03 10:28

    json形式にしてpostを送ってもやはり送った先のpostが空の状態でした
    またajax以外で送るとしてもsubmitですと、valueを複数持たせることができませんし、”値段 設定数”のようにsplitで" "に分けるにしても表示させたいのは値段だけですからどうしようもないです

    キャンセル

  • 2018/12/03 10:31

    >ajax以外で送るとしてもsubmitですと、valueを複数持たせることができませんし

    どういう形を想定してるのでしょうか。ちょっと意味がわかりません。

    キャンセル

  • 2018/12/03 10:32

    「ajaxは画面に対してリクエストを送る仕組みではない」というところはりかいされたのでしょうか。

    キャンセル

  • 2018/12/03 10:42

    input type=submitでvalue=値段,購入人数状態 みたいに複数もたせることができますでしょうか?という意味です
    >「ajaxは画面に対してリクエストを送る仕組みではない」
    ajaxを使って裏でurl先のphpで処理する機能を作った頃はちゃんとpostを送ることができたことがありました
    画面で表示する際はPOSTが空という扱いで表示されるけど実際には送れているということでしょうか

    キャンセル

  • 2018/12/03 11:11 編集

    > input type=submitでvalue=値段,購入人数状態 みたいに複数もたせることができますでしょうか?という意味です
    幾らでも方法はありますよ。hidden作っておくとか、配列で持たせるとか。

    > ajaxを使って裏でurl先のphpで処理する機能を作った頃はちゃんとpostを送ることができたことがありました
    まあ送るのはそれでも良いですが、裏で実行されてるので画面表示関係ないということだけです。
    逆にレスポンスデータ以外のHTMLとか色々あることで不具合が起きる可能性も高いというだけですね。

    > 画面で表示する際はPOSTが空という扱いで表示されるけど実際には送れているということでしょうか

    画面表示した時点で「POST」ないですよね。
    「送信した」「送信した先の画面を開いた」ではないです。
    「送信したら送信先の画面にリクエストを送る」なので。
    最初に表示されているエラー、ajaxで送ってからわざわざ送信先の画面別で開いてませんか?
    それだと送れていないのは当然です。画面を自分で開いているんですから。
    yambejpさんのコメントにあるように送る直前でconsole.log()確認して値があるのでしたらajaxで送られてはいるはずです。
    私の回答の後半にあるように$_POSTの内容をログファイルに書き出すように組んでみてください。
    繰り返しますがajax送信先の画面を「自分でURL打って開く」ことはありえません。

    キャンセル

  • 2018/12/03 13:26

    >幾らでも方法はありますよ。hidden作っておくとか、配列で持たせるとか。
    input type=submitは他のinputも送信してくれることに失念していました
    hiddenで持たせることで無事送信することができました!
    またajaxの件も理解しました

    キャンセル

  • 2018/12/03 13:37

    解決されたようで何よりです。

    キャンセル

同じタグがついた質問を見る

  • PHP

    24023questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    20383questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1326questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。