【PHP】javascriptの変数をPHPに受け渡す方法について、助けてください…

現在、クイズサイトを作っております。
言語はHTML/CSS、Javascriptで作成をしており、クイズの正解の数などはJavascriptで計算をしています。

(index.html)

HTML
1<div class="box">
2            <div id="q_1" class="fit">
3              <p>１問目:　〇〇を答えよ</p>
4              <ul>
5                  <li>
6                      <input type="radio" name="q_1" class="typeB" id="1">
7                        <label for="1" class="label sample_label">不正解</label>
8                    </li> 
9                    <li>
10                     <input type="radio" name="q_1" class="typeB" id="2">
11                        <label for="2" class="label sample_label">不正解</label>
12                   </li> 
13                   <li>
14                     <input type="radio" name="q_1" class="typeA" id="3">
15                        <label for="3" class="label sample_label">正解</label>
16                  </li>
17                  <li>
18                        <input type="radio" name="q_1" class="typeB" id="4">
19                        <label for="4" class="label sample_label">不正解</label>
20                   </li>
21              </ul>
22            </div>
23            </div>
24<!--以下クイズが続きます-->

【Javascript】

javascript
1 //チェックされているinputの数を取得
2        var typeANum = $(".typeA:checked").length,
3
4 　　　 var score = typeANum*3; //正解数×３点

今回、Twitterでクイズの得点をシェアできるようにしたいと思いました。
そのためにはPHPで得点を取得しないと、Twitterシェア画面で表示させることが出来ないことが分かりました。

そこで、index.htmlをindex.phpに変更し、Javascript変数のscoreをphpに受け渡すことを試みました。
ajaxを使う方法を見つけやってみました。

javascript
1//scoreをphpに引き渡す
2        $.ajax({
3         type:"POST",
4         url:"index.php",
5         data:{'データ':score},
6         dataType:"json",
7         scriptCharset:'utf-8'
8        })
9        .then(
10          function(param){
11            console.log(param);
12          },
13          function(XMLHttpRequest,textStatus,errorThrown){ //エラー時の実行
14            console.log(XMLHttpRequest);
15        });

php
1  <?php
2          header("Content-type: application/json; charset=UTF-8");
3          $data = filter_input(INPUT_POST,'データ'); //送ったデータを受け取る
4          $score = $data;
5          echo json_encode($param);//データを返す
6          ?>

結果、index.phpにて上記データを受け取るとこんなエラーが発生しました。

Warning: Cannot modify header information - headers already sent by…

【試したこと】
もともとhtmlだったものをphpファイルに変更したため、headerが重複しているという記事を見つけました。
htmlファイルの先頭に、phpの「header("Content-type: application/json; charset=UTF-8");」を持っていきましたが、ブラウザ上にプログラムがそのまま表示されてしまうエラーになりました。
そのほか、記述の位置をいろいろと変更したりしてみましたが同じくブラウザ上にプログラムがそのまま表示されるエラーが発生します。

【教えていただきたいこと】
javascriptの変数をhtmlに記載しているTwitterシェアで表示させたい。というのが今回のやりたいことです。
私が調べた限りでは、上記の通りPHPに変数を受け渡すことが見つかり試しています。
エラー解消のヒント、そのほかのやり方のヒントをお教えいただけるとありがたいです。
phpに関して初歩的な知識しかありません…。

何卒よろしくお願いします。

m.ts10806

2021/07/20 04:57

どのようにエラーを確認したのでしょう。

ekitabi

2021/07/20 05:03

ありがとうございます。サーバー上にアップして実行をしてみました。するとPHP記載部分にWarning: Cannot modify header information - headers already sent by…と表示されます。 index.phpの先頭に「<?php header("Content-type: application/json; charset=UTF-8");」をもっていって試した時にもサーバー上にあげて実行してみました。すると、プログラムがそのまま表示されてしまったという流れです。説明が分かりにくく申し訳ございません。何卒よろしくお願いします。

m.ts10806

2021/07/20 05:05

そのエラーはどこで確認してますか？非同期なので画面から確認は困難（レスポンスがjsonなので）かと思います。サーバーのエラーログを確認されてますか？

m.ts10806

2021/07/20 05:06

index.phpは提示されたコードだけが書いてありますか？

ekitabi

2021/07/20 05:19

ありがとうございます。 index.phpには、 <?php header("Content-type: application/json; charset=UTF-8"); $data = filter_input(INPUT_POST,'データ'); //送ったデータを受け取る $score = $data; echo json_encode($param);//データを返す ?> の後に、クイズの問題などを記載した<!doctype html>…が続きます。先頭に、 <?php header("Content-type: application/json; charset=UTF-8"); $data = filter_input(INPUT_POST,'データ'); //送ったデータを受け取る $score = $data; echo json_encode($param);//データを返す ?> を記載した場合には、プログラムがそのまま表示される。 <!doctype html>…（以下クイズなどを記載）の後に<?php～を記載した場合は、クイズが表示された一番最後に、Warning: Cannot modify header information - headers already sent by…が表示されました。 jsonに詳しくなく的外れな回答でしたら申し訳ありません…

m.ts10806

2021/07/20 06:34

そもそもAjaxは非同期で、バックグラウンドでの処理がされるため「画面」という概念を持ちません。出力された情報が全て呼び出し元にレスポンステキストとして返されます。 htmlを返したいならhtmlを含めるのもありですが、データだけ返したいのでしたらそれ以外の関係のない出力は不要です。いわば「API」です。例えば郵便番号を送ったら対応する住所だけが返ってくるみたいなやつです。

ekitabi

2021/07/20 11:19

ありがとうございます。非同期のAjaxは画面という概念を持たないのですね。知識不足で申し訳ありません… 何とか希望通りに動作しました。ご丁寧にありがとうございます！

m.ts10806

2021/07/20 11:44

どうなったのか知らないですが、質問が「受付中」のままになっているので、きちんと締めてもらえればと。 https://teratail.com/help/question-tips#questionTips4 いずれにしても概念とか含めて体系的に学ばれたほうが良いと思います。使いたい技術を前提としてアプリケーション組むわけではないでしょうし。

ekitabi

2021/07/20 11:56

大変失礼いたしました(汗初歩的ながら、非同期通信を行うことで、javascript→phpのデータの受け渡しが出来たり、一部だけをリロードしたりできることを初めて知りました。これから勉強していきます！また機会ありましたらご教授いただけますと幸いです。

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

回答1件

ベストアンサー

Warning: Cannot modify header information - headers already sent by…

ヘッダー送信後なのにheader()関数を使うと、そうなります。

phpコードの1行目ですぐ

php
1<?php
2

ではじめつつ、html文字列の出力など我慢した上でないと
header()関数が効きません。

投稿2021/07/20 04:41

退会済みユーザー

総合スコア0

ekitabi

2021/07/20 04:56

ご回答いただきありがとうございます。初歩的な質問で申し訳ありません。以下のようにしましたら、ブラウザ上でプログラムがそのまま表示されてしまいます…。【index.php】 <?php header("Content-type: application/json; charset=UTF-8"); $data = filter_input(INPUT_POST,'データ'); //送ったデータを受け取る $score = $data; echo json_encode($param);//データを返す ?> <!doctype html> <html lang="ja"> <head> …続く【出力結果】プログラムがそのままブラウザ上に表示されてしまいます。 null<!doctype html> <html lang="ja"> <head> …続く今一度ヒントをいただけるとありがたいです…

退会済みユーザー

2021/07/20 05:03 編集

単にjson文字列を出力する目的であれば、header()関数でContent-typeを指定しつつ、!doctype以降のhtml文字列出力は不要ですが、単にjson文字列を受け取って普通にPHPでhtml出力して表示するのであれば header()でContent-typeを指定する必要はありません。 $dataに受け取ったつもりで、$paramを出力するとか、意味わかって書いてます？

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