XMLHttpRequestでの変数受け渡しができません
やりたいこと
①window.promptを利用し、ユーザーに希望ユーザー名を入力してもらう（実装済み）
②XMLHttpRequestを使用して、希望ユーザー名を別ページのPHPファイルに送りたい（ここで困っています）
③PDOを使用し、SQLのデータベースに希望ユーザー名を登録（②が解決すればできます）
発生している問題・エラー
送れているはずの変数を、別ページで参照できません。
該当するソースコード
▼localhost/hoge/account/index.php
<?php
/*中略*/
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$.ajax({
success : function(response){
alert('ajaxの接続は成功');
//ページを開くと毎回「ajaxの接続は成功」と出ています。
},
error: function(){
alert('ajaxの通信失敗');
}
});
</script>
</head>
<body>
<main class="main">
<?php /* JavaScript用の関数定義 */ ?>
<script type="text/javascript">
function changeName(){
var newName = window.prompt("新しい名前を入力してください","");
//ajaxでphpにデータを送る
let xhr = new XMLHttpRequest();
xhr.open('POST','../experiment/',true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
xhr.send('text='+newName);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
alert("送れました"); //これも毎回表示されます
location.href="../experiment/";
}
}
};
<?php /* 中略 */ ?>
<ul>旧アカウント名が入ります<input type="button" onClick="changeName()" value="変更する"></ul>
<?php /* 後略 */ ?>
▼localhost/hoge/experiment/index.php ※実験用のphpファイル
<?php
/* 中略 */
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$.ajax({
success : function(response){
alert('ajaxの接続は成功');
//ページを開くと毎回「ajaxの接続は成功」と出ています。
},
error: function(){
alert('ajaxの通信失敗');
}
});
</script>
</head>
<body>
echo var_dump($_POST);
//出力結果は「array(0) { }」になってしまう
?>
</body>
<?php /* 後略 */ ?>
備考
- jQueryや
$.postでも同じシステムを実装しようとしましたが、うまくいきませんでした。 - ほかの方法で「
window.promptの入力内容をPHPのPDO経由でSQLに登録」が実装できるようなら、そのアイデアをご教示いただければ幸いです。 ※inputタグから$_POSTにデータを格納して……という方法のほうが楽なのは承知しておりますが、技術練習のため今回はこの方法をあえて避けています。
0
