phpからjavascriptを呼んで、javascriptから更にphpを呼ぶとエラーになります。

test.php

PHP
1<html lang="ja">
2<body>
3	<div id="text_area"></div>
4</body>
5</html>
6
7<?php
8echo <<<EOM
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
10<script>
11var fn = function() {
12	var result = "NG";
13	$.ajax({
14        type: 'post',
15        url: "test1.php",
16        success: function($param_json){
17			var param = JSON.parse($param_json);
18			result = param.result;
19        }
20	});
21	document.getElementById('text_area').innerHTML = result;
22};
23fn();
24</script>
25EOM;
26?>

test1.php

PHP
1<?php
2$param = array(
3    "result" => "OK"
4);
5$param_json = json_encode($param);
6echo $param_json;
7?>

結果
NG

エラーメッセージ
Uncaught SyntaxError: Unexpected token u in JSON at position 0
at JSON.parse (<anonymous>)
at Object.success (test.php:16:21)
at c (jquery.min.js:2:28327)
at Object.fireWith [as resolveWith] (jquery.min.js:2:29072)
at l (jquery.min.js:2:79901)
at XMLHttpRequest.<anonymous> (jquery.min.js:2:82355)
success @ test.php:16
c @ jquery.min.js:2
fireWith @ jquery.min.js:2
l @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
fn @ test.php:12
(anonymous) @ test.php:22

【質問】
どういうことでしょうか？

追記
呼び出し元をhtmlにすると動きます。

5ugarVVatch1ng

2022/04/11 14:56

…とりあえず$param_jsonの値はなんでしたか？ console.log($param_json)で見てみてください。

hoshi-takanori

2022/04/11 16:31

$.ajax は非同期なので、success: の無名関数よりも console.log の方が先に実行されますね…。

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

回答2件

自己解決

test.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<body>
4	<div id="text_area"></div>
5</body>
6</html>
7
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
9<script>
10var result = "NG";
11var fn = function() {
12	$.ajax({
13		type: 'post',
14		url: "test1.php",
15		success: function($param_json){
16			var param = JSON.parse($param_json);
17			result = param.result;
18		}
19	});
20	document.getElementById('text_area').innerHTML = result;
21	setTimeout(fn,1000);
22};
23fn();
24</script>

投稿2022/04/12 10:46

編集2022/04/12 10:55

jmdajmw

総合スコア302

yambejp

2022/04/12 10:50

私の回答の通り、successは非推奨です result = param.resultをしておいて console.logで$param_jsonを表示しているのも意味不明

jmdajmw

2022/04/12 11:06

＞私の回答の通り、successは非推奨ですお客さんの環境で動けば問題ないのでそのままにしています。

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

PHPのヒアドキュメントで$は変数展開しようとするのでjQueryとは相性がわるい
nowdocで対応してください
それと$.ajaxは結果をまってやるなら$.whenなどをかましてください
もしくはダイレクトにdoneの中で処理するとか
successは古い書き方なので使用は推奨されません
//test.php

PHP
1<div id="text_area"></div>
2<?php
3echo <<<'EOM'
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
5<script>
6var fn = function() {
7	var result = "NG";
8	$.when($.ajax({
9        type: 'post',
10        url: "test1.php",
11        }).done(function($param_json){
12          console.log($param_json);
13          var param = JSON.parse($param_json);
14          result = param.result;
15        })).then(function(){;
16          document.getElementById('text_area').innerHTML = result;
17        });
18}
19fn();
20</script>
21EOM;