JavaScriptの配列の要素の全ての中身のデータをphpに送りそれをHTML上で表示するには？

以前に質問した者です。

今度はJavaScriptにてvar配列の要素の中身の全てのデータ（3つある値）をphpに送りそれをHTML上で表示させるプログラムを作成しようとしようとしています。

それで、ajaxを用いて配列の要素データ（3つあるデータ）をphpに送り、filter_inputで受け取り、その送られた3つのデータをHTMLで表示させたいのですが、表示されません。

なぜ、表示されないのでしょうか？

javascript
1var arrayname = new Array();
2	arrayname[1]='1';
3	arrayname[2]=1+3;
4	arrayname[3]=123;
5	
6$.ajax({
7    type: "POST", 
8    url: "rensyu.php", //　送り先
9    data: [arrayname], //　送りたいデータを送る
10    dataType : "json", //　データ形式を指定
11    scriptCharset: 'utf-8'
12});
13

php
1<?php
2header('Content-type: application/json; charset=utf-8'); // ヘッダ（JSON指定など）
3$data = filter_input(INPUT_POST, arrayname); // 送ったデータを受け取る
4echo $data;

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6</head>
7<body>
8<script type="text/javascript" src="rensyu1-1.js">　</script>
9<?php echo $data; ?>
10</body>
11</html>

回答のほうよろしくお願いします。

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

回答2件

ベストアンサー

Ajaxはバックグラウンドで実行されるので「画面」という概念を持ちません。
リクエストを受け取った先での出力を呼び出すもとに全て返す、いわば「API」のような挙動になります。

$.ajax()で送ったのでしたら.done()のコールバックでAjax実行先URLの出力を全て受け取ります。
なので、done()のコールバックでデータを受け取り、そのままJavaScriptでHTMLに描画します。
(done()および$.ajax()の持つ機能についてはAPIドキュメント参照)

$data = filter_input(INPUT_POST, arrayname); // 送ったデータを受け取る

これではarraynameという定数を期待してPHPは構文解析をします。
フォーム送信と同じくname(key)=>value形式で受け取ります。

下記のように入れていることから、name部分は0の配下に更に1,2,3とある感じでしょうか。

arrayname[1]='1';

arrayname[2]=1+3;
arrayname[3]=123;
data: [arrayname], //　送りたいデータを送る

$data = filter_input(INPUT_POST, '0')とか？
だと動かなそうですし、実装としてよろしくないので

js
1
2    data: {'key':arrayname}, //　送りたいデータを送る
3

としたうえで

php
1$data = filter_input_array(INPUT_POST,  [
2    'key' => [
3        'flags' => FILTER_REQUIRE_ARRAY
4    ]
5]);
6echo json_encode($data);

ですかねぇ。
filter_input_array()

投稿2021/03/12 10:54

編集2021/03/12 11:11

m.ts10806

総合スコア80875

himikonoouji222

2021/03/13 09:15

ありがとうこざいました。

m.ts10806

2021/03/13 09:16

回答をどのように理解して解決とされたのでしょうか。 https://teratail.com/help/question-tips#questionTips4-2 質問内容から一発で理解できるとは思えません。理解できないままとりあえず解決として同じような質問されるとゲンナリします。

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

まずphpのapiを用意します

PHP
1//rensyu.php
2<?PHP
3$arrayname=filter_input(INPUT_POST,'arrayname',FILTER_DEFAULT,FILTER_REQUIRE_ARRAY);
4print json_encode( $arrayname);

上記でうけれられるのは送り側が「arrayname[]」という名前をつけたものです
したがって送り側の処理はこうなります

javascript
1//from.html
2<script>
3const arrayname = new Array();
4    arrayname[1]='1';
5    arrayname[2]=1+3;
6    arrayname[3]=123;
7const body=arrayname.reduce((x,y)=>(x.append("arrayname[]",y),x),new FormData());
8const method='post';
9const url='rensyu.php';
10fetch(url,{method,body}).then(res=>res.json()).then(console.log);
11</script>