プロが教える店舗&オフィスのセキュリティ対策術

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

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

{"id":null,"hoge":"hogehoge"}
ソースコードは以下の通りです。

top.html
<html>
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>
<form id="bitobopass_table" name="bitobopass_table">
<table id="passtable">
<tr>
<td><input id="twid" name="twid" type="text" placeholder="ID"></td>
</tr>
</table>
<button type="button" id="sendBtn" name="sendBtn">送信</button>
</form>
<table id="export01">
<tr>
<td>id</td>
<td>pass</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="js/receive.js"></script>
</body>
</html>


receive.js
$(function() {
$('#sendBtn').on('click', function(event) {
let id = $('#twid').val();
$.ajax({
type: "POST",
url: "../request.php",
data: { "id" : id },
dataType : "json"
}).done(function(){
console.log('success');
}).fail(function(){
console.log('fail');
});
});
});


request.php
<?php
$id = $_POST['id'];
$list = array("id" => $id, "hoge" => "hogehoge");
header("Content-type: application/json; charset=UTF-8");
echo json_encode($list);
exit;
?>

phpで$idの部分がnullになってしまいます。
・nullになる原因は何か
・どのようにすればnullが解決できるか
ご回答いただけると嬉しいです。

質問者からの補足コメント

  • つらい・・・

    JSのログではnullではない値が出力されています。
    PHPをブラウザから直接見るとnullになっている状態です。

    No.2の回答に寄せられた補足コメントです。 補足日時:2022/08/05 13:11
  • うーん・・・

    そのままtxtやjsonに入力データを渡せば良い感じですか?

    No.3の回答に寄せられた補足コメントです。 補足日時:2022/08/05 23:21

A 回答 (3件)

No2です。



>JSのログではnullではない値が出力されています。
>PHPをブラウザから直接見るとnullになっている状態です
何をどのように試しているのか不明ですけれど・・・

>JSのログではnullではない値が出力されています。
「nullではない値」の意味がわかりませんけれど、ご提示のソースのままで実行すれば(=ボタンを押して送信すれば)、コンソールには「success」か「fail」のどちらかしか表示されないはずです。
(スクリプトにエラーがある場合は、その旨が表示されて実行が打ち切られますが・・)

>PHPをブラウザから直接見るとnullになっている状態です
ブラウザで直接phpのアドレスにアクセスしているってことでしょうか?
もしそうなら、Ajaxは関係ありませんね。

その場合は、単にリクエストしているだけで何も送信していないので、ご提示のコードだとphp側でエラーが発生します。
その旨の警告が返されて、ブラウザに表示されていませんか?
No2にも記しましたが、値を取得できずに定義しただけの状態になるのでnull値になると考えられます。
Json化した文字列は
 {"id":null,"hoge":"hogehoge"}
となり、ブラウザはそのままをレスポンスとして出力します。


何をどうしたいのかさっぱりわかりませんけれど、エラーを回避したければ、php側でチェックを行えば宜しいでしょう。
http://memo.imomushi.com/php/getya-postno-parame …
値が存在しない場合に、デフォルトの値を返したいのなら、そのようにする必要があります。

ご提示のコードはそのような使い方を想定していないと思いますが、どうやら、ご提示のコードとは異なることを期待しているようなので、どのように使おうとしているのかすらわからなくなりましたけれど・・・
そもそも、単にアクセスするだけの利用なら、入力データのチェックや取得をする必要もなく、出力だけを行えばよいです。(ajaxは関係ありません)
この回答への補足あり
    • good
    • 0
この回答へのお礼

自己解決しました。
PHPをブラウザから直接見るとダメなようで、PHP経由でAjaxでデータをメール送信することに成功しました。

お礼日時:2022/08/08 14:35

こんにちは



あまりajaxを利用したことがないので、よくはわかっていませんけれど・・
見たところ動作しそうなので、私の環境で試してみましたが動作するようですね。

>こんな感じで入力値がnullで出力されてしまいます。
>{"id":null,"hoge":"hogehoge"}
ご提示の範囲内には値を出力している部分がありませんが、これはPHP側での値でしょうか?
それとも、javascript側での値でしょうか?
また、スクリプト側では success の出力がされているという解釈で良いのでしょうか?
その上で、受信内容が
>{"id":null,"hoge":"hogehoge"}
だという意味でしょうか?

スクリプトからの送信時にはエンコードされるので、null 値にはならなさそうな気がしましたので、試しに送信前に、
 id = null;
と明示的に代入してから送ってみました。
(送信前に、console出力すれば、当然「null」と表示されます)

この場合はphp側の、
>$id = $_P OST['id'];(←投稿時受付けないので空白を入れてます)
で、(想像通り)空白文字列として取得されています。
当然、その後返す値もnullではなく、空白文字列になります。
(php 8.0.0 is_null() でテスト)

>phpで$idの部分がnullになってしまいます。
>・nullになる原因は何か
送信データに "id" というkeyが存在しなければ、未定義でnull値になる可能性がありそうですが、その場合はエラーが発生するので、結果が success にはならないはずです。
また、php側で、
 $id = null;
と直接代入してしまえば返送される値も null として送られ、受信側(javascript)でも null として認識されるようです。

※ ご質問の事象を再現できないので、あまり役に立たないとは思いますが、何かのご参考にでもなれば。
この回答への補足あり
    • good
    • 1

receive.jsの


let idをvar idにしたらどうなりますか?
letはブロック内でのみ有効らしいので$.ajaxのブロック内では別のid変数が出来上がってるかもしれません
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています