Ajaxを使いページをリロードさせずにフォーム送信をさせて同ページで値をPHPで受け取りたいです。

###前提・実現したいこと
Ajaxを使いページをリロードさせずにフォーム送信をさせて
同ページで値をPHPで受け取りたいです。

調べたのですがAjaxに関してその程度の認識しかないので
Ajaxが本来何をするためのものか、最低限何をすれば動くのか
を教えていただけるととても助かります。
###発生している問題・エラーメッセージ

POSTした値をechoで表示しようと思うのですが出ません。

###該当のソースコード

js
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script type="text/javascript">
6function httpobj(){
7  var xmlHttp;
8  xmlHttp = new XMLHttpRequest();
9  xmlHttp.onreadystatechange = checkReadyState;
10  xmlHttp.open("POST", "add.php");
11  xmlHttp.send();
12}
13function checkReadyState(){
14  if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)){
15    alert(xmlHttp.responseText);
16  }
17}
18</script>
19</head>
20<body>
21<form>
22   <input type="text" value="商品名を入力してください" name="name">
23   <br> 
24   <input type="radio" name="product"><a>検索</a><input type="radio" name="product"><a>選択</a>
25   <br> 
26   <input type="text" value="商品分類を入力" name="cate">
27    <input type="button" name="submit" onclick="httpobj()">
28    <?php echo $_POST['name']; ?>
29</form>
30</body>
31</html>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/11/22 05:19

提示のHTMLは「add.php」でしょうか。

mashumaro0628

2017/11/22 05:21

あ、すみません。add.phpです

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

回答2件

ベストアンサー

提示のコードではクリックした時点でsubmitが実行されるため、ページが移動すると思います。

とりあえず慣れるまでは呼び出し側HTMLとPHPを分けたほうがわかりやすいと思います。あと、jQueryではじめるのがお勧めです。

【jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル – WebCake】
http://webcake.no003.info/webdesign/jquery-ajax-php-post-sample.html

【JavaScript(jQuery)からPHPのAPIを利用する - Qiita】
https://qiita.com/mpyw/items/62e6e415f86eb30a5ff4

投稿2017/11/22 05:52

kei344

総合スコア69400

ちょっと意味がわからないのですが
ajaxで取得したデータをphpで受け取ることは理論的に不可能では？
php（または他のサーバープログラム）に投げるのがajaxなので
取得したデータは元のページにもどってきます。

投稿2017/11/22 05:29

yambejp

総合スコア114777

KSwordOfHaste

2017/11/22 13:58

(1)PHPでHTMLを生成 (2)PHPからHTML送信==>browser (3)PHP起動<==browser(javascript)からajaxでサーバーアクセスしかし(3)は(1)とは別のコンテキスト。質問者さんはこの契機での結果を(1)の時点のPHPで検知してなんとかするということを意図しているように思える。しかしそれは無理。というふうに考えました。yambejpさんの「不可能」とは上に述べた内容と同様の意味でしょうか？

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

あなたの回答