jQueryとPHPでAjaxを利用して入力フォームを作っています。
PHP側で入力データがnullで返ってくるので困っています。
ググって調べたのを試しましたが、いずれもnullが返ってきました。

こんな感じで入力値がnullで出力されてしまいます。

{"id":null,"hoge":"hogehoge"}

追記(2022-08-04)
Javascript側のconsole.logではnullが出力されませんが、PHPの方ではnullが表示されてしまいます。
PHPにjsonデータだけ出力して表示したいということです。

ソースコードは以下の通りです。

html
1<html>
2<head>
3  <meta charset="UTF-8">
4  <title>入力フォーム</title>
5</head>
6<body>
7  <form id="bitobopass_table" name="bitobopass_table">
8    <table id="passtable">
9      <tr>
10        <td><input id="twid" name="twid" type="text" placeholder="ID"></td>
11      </tr>
12    </table>
13    <button type="button" id="sendBtn" name="sendBtn">送信</button>
14  </form>
15  <table id="export01">
16    <tr>
17      <td>id</td>
18      <td>pass</td>
19    </tr>
20  </table>
21  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
22  <script src="js/receive.js"></script>
23</body>
24</html>

javascript
1$(function() {
2  $('#sendBtn').on('click', function(event) {
3    let id = $('#twid').val();
4    $.ajax({
5      type: "POST",
6      url: "../request.php",
7      data: { "id" : id },
8      dataType : "json"
9    }).done(function(){
10      console.log('success');
11    }).fail(function(){
12      console.log('fail');
13    }); 
14  });
15});

php
1<?php
2 $id = $_POST['twid'];
3 $list = array("id" => $id, "hoge" => "hogehoge");
4 header("Content-type: application/json; charset=UTF-8");
5 echo json_encode($list);
6 exit;
7?>

フォルダ階層
鯖┬js─receive.js
├css
├request.php
└top.html

動作環境
Google Chrome 103.0.5060.134
レンタル鯖(xfree)
FTPソフト(Filezilla)
・nullになる原因は何か
・どのようにすればnullが解決できるか
ご回答いただけると嬉しいです。

meitetsu_hoge

2022/08/03 04:28

javascriptでのconsole.log()はhtmlファイルに'success'と返ってきます。

meitetsu_hoge

2022/08/03 04:48

$id = $_POST['twid']; ↓↓↓ $id = $_POST['id']; 試しましたがこちらもnullが出力されてしまいます。

退会済みユーザー

2022/08/03 05:27 編集

jsで data: { "id" : id }, としているのだから、phpでは $id = $_POST['id']; でいいはず。 phpコードでの、「?>」なしの方がいいんじゃないかと。 jsもphpもutf-8で保存してあるよね？

meitetsu_hoge

2022/08/03 06:18

文字コードを確認しましたがいずれもUTF-8でした。 ?>を外してみましたがこちらもnullになってしまいます。

回答4件

まずは $_POST に何が入っているか確認してみましょう。

投稿2022/08/09 01:15

ima24san

総合スコア27

最初に表示しているページが top.html で、
リクエスト先が request.php だとしたら、
htmlを表示しているページのURLを基準に考えるので

url: "../request.php",

じゃなくて

url: "request.php",

でいいんじゃないのかな。

投稿2022/08/05 00:06

退会済みユーザー

総合スコア0

これでPHP側にデータ渡ってきてnullじゃなくなったけど、これでもnullなら何かほかに原因があるかな。

php
1<?php
2if($_SERVER['REQUEST_METHOD'] == 'POST') {
3    $id = $_POST['id'];
4    $list = array("id" => $id, "hoge" => "hogehoge");
5    header("Content-type: application/json; charset=UTF-8");
6    echo json_encode($list);
7    exit;
8}
9?>
10<html>
11
12<head>
13    <meta charset="UTF-8">
14    <title>入力フォーム</title>
15    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
16    <script>
17        $(document).ready(function () {
18            $(function () {
19                $('#sendBtn').on('click', function (event) {
20                    let id = $('#twid').val();
21                    $.ajax({
22                        type: "POST",
23                        url: "./request.php",
24                        data: { "id": id },
25                        dataType: "json"
26                    }).done(function (data) {
27                        console.log('success');
28                        console.log(data);
29                    }).fail(function () {
30                        console.log('fail');
31                    });
32                });
33            });
34        });
35    </script>
36</head>
37
38<body>
39    <form id="bitobopass_table" name="bitobopass_table">
40        <table id="passtable">
41            <tr>
42                <td><input id="twid" name="twid" type="text" placeholder="ID"></td>
43            </tr>
44        </table>
45        <button type="button" id="sendBtn" name="sendBtn">送信</button>
46    </form>
47    <table id="export01">
48        <tr>
49            <td>id</td>
50            <td>pass</td>
51        </tr>
52    </table>
53</body>
54
55</html>

投稿2022/08/03 21:08

RiaFeed

総合スコア2687

回答へのコメント

meitetsu_hoge

2022/08/03 22:26

JSのログの方にはhtmlファイルで入力したデータが出力されましたが、別ファイルのPHPに表示されていない状態です。別ファイルのPHPにデータだけ渡すことは可能なのでしょうか？

RiaFeed

2022/08/03 22:54

私が書いたPHPコードのことを言っているのならJSのログに入力したデータ出力されているということはPHPに入力したデータが渡っているということになります。表示されていない状態とはどういう意味でしょうか？質問段階からしてPHPコードはjsonを出力することを意図しているはずでjsonを直接表示しても仕方ないと思いますが・・・ ajax関数のurlを書き換えれば別ファイルのPHPにデータを渡せるはずです。

meitetsu_hoge

2022/08/04 13:29

JSのログではnullなしで取れていますが、PHPファイルにアクセスするとnullが表示されている状態です。

RiaFeed

2022/08/04 21:37

PHPファイルにブラウザで直にアクセスしているんですか？

meitetsu_hoge

2022/08/04 22:04

そうです。

RiaFeed

2022/08/04 22:07

だとすればjs(HTML)から$ajax関数で渡しているデータを一切渡していないのと同じですからnullなのは当たり前です。

meitetsu_hoge

2022/08/04 22:46

他ファイルから見るにはどうすればいいですか？ jsonファイルやtxtファイルから見るでもいいので

CHERRY

2022/08/04 22:59

横からですが... > 別ファイルのPHPに表示されていない状態です。別ファイルのPHPにデータだけ渡すことは可能なのでしょうか？別ファイルのPHP から、どのように呼び出したりアクセスしているのでしょうか。

RiaFeed

2022/08/04 23:14

GETにも対応してクエリストリングで渡したいって話なのか入力した記録を残して後で見たいって話なのか・・・？

meitetsu_hoge

2022/08/05 04:33

PHPをブラウザから直接見るとnullです。ログではnullになってません。 GETで別のhtmlファイルから見るでもいいので...

RiaFeed

2022/08/05 05:48 編集

(入力フォームの入力データを処理するはずの)PHPファイルに直接ブラウザでアクセスしてどこから入力フォームの入力データを取るつもりなんでしょう？何も入力していないのと同じですよ？

meitetsu_hoge

2022/08/05 09:57

他のテキストファイルとかからGETするしかないですか...

meitetsu_hoge

2022/08/05 10:11

PHP経由で他のJSONとかtxtとかに渡すという認識でOKですか？

PHP
1$id = $_POST['twid'];
2↓↓↓
3$id = $_POST['id'];

では？

参考

呼び出しファイルを間違えているとかそういう凡ミスのような気がします
自分自身にpostして試してください

PHP
1<?PHP
2if($_SERVER["REQUEST_METHOD"]=="POST"){
3  $id = $_POST['id'];
4  $list = array("id" => $id, "hoge" => "hogehoge");
5  header("Content-type: application/json; charset=UTF-8");
6  echo json_encode($list);
7  exit;
8}
9?>
10<script>
11window.addEventListener('DOMContentLoaded', ()=>{
12  sendBtn.addEventListener('click',()=>{
13    const body=new FormData();
14    body.append('id',twid.value);
15    fetch("",{method:"post",body}).then(res=>res.json()).then(console.log);
16  });
17});
18</script>
19<form>
20<input id="twid" name="twid" type="text" placeholder="ID">
21<button type="button" id="sendBtn">送信</button>
22</form>