JSからPHPの変数をajaxで取得したい

Question

やりたいこと

JSからPHPの変数を取得したいのですが、ajaxのやり方がわかりません。
PHPとHTMLを同じファイル内に書いて実行してみたところ正常に動作したので、PHPに問題はないと思います。
それとAzureの環境で開発しています。
足りない情報などありましたら教えてください。
よろしくお願いします。

'use strict';

let y_list = document.getElementById("Y_List");

window.onload = function(){
	let ajax = new XMLHttpRequest();
	let stmt = new Array();
	
	ajax.onreadystatechange = function(){
		if(ajax.readyState == 4){
			if(ajax.status == 200){
				console.log("通信成功");
			}
		}else{
			console.log("通信中・・・");
		}
	}
	
	ajax.open("POST", "pre_03.php", true);
	ajax.send();
}

<?php
  include "db_config.php";
  
  $products = array();

  try{
    
    $db = new PDO(PDO_DSN, DB_USERNAME, DB_PASSWORD);
    $db -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    $stmt = $db -> query("SELECT * FROM `py`");
    $products = $stmt -> fetchAll(PDO::FETCH_ASSOC);
    
    $db= null;
    
  }catch(PDOException $e){
    echo $e -> getMessage();
    exit();
  }

  $db = null;
?>

Comments

[m.ts10806]

PHPからは何も返していなく、Ajaxのコールバック引数に何もないので、現状SELECTしただけというのは認識されていますか？
何をもとにこのコードを書いたのか出典も明示してください

Answer 1

js側はfetchで処理してください
postしてますがパラメータを渡してないのでgetでもよいかと
あとは他の方が指摘されているとおりAPI側で$productsを
何らかの形で出力しないと、受け取るものがありません

Answer 2

pre_03.phpが質問文内のphpコードなのだとしたら、
$productsに格納したと思われるデータをjsonで応答する必要があります。

例えば：

<?php
  include "db_config.php";

  $products = array();

  try{

    $db = new PDO(PDO_DSN, DB_USERNAME, DB_PASSWORD);
    $db -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    $stmt = $db -> query("SELECT * FROM `py`");
    $products = $stmt -> fetchAll(PDO::FETCH_ASSOC);

    $db= null;

  }catch(PDOException $e){
    echo $e -> getMessage();
    exit();
  }

  $db = null;

  ob_clean();
  header('Content-type: application/json; charset=utf-8');
  echo json_encode($products);
  ob_flush();