JavaScript(jQuery)でデータをPHPにPOSTしたい

JavaScript(jQuery)でデータをPHPにPOSTしたいと考えていますが、できておりません

JavaScript
1// 関数の呼び出し
2   postData();
3
4// PHPにPOSTする
5    function postData() {
6
7        $.ajax({
8            type: "post",
9            url: "makeTxt.php",
10            dataType: 'text',
11            data: 'aaa',
12            async: false,
13            //Ajax通信が成功した場合
14            success: function(data, dataType) {
15                //PHPから返ってきたデータの表示
16                alert(data);
17            },error: function() {
18                alert('POST送信が失敗しました。');
19            }
20        });    
21    }

PHP
1<?php
2// CORSエラー対策用
3header("Access-Control-Allow-Origin: *");
4$usr = $_POST;
5file_put_contents('test.txt', $usr);
6

上記コードでJavaScriptを実行しますと、successの方に入り、またtest.txtも作成されます。しかし、test.txtの中身は空で、JavaScriptでPOSTしたはずの、aaaという文字が記載されておりません。

今回はjQueryのajaxを用いていますが、jQueryやajaxにこだわっている訳ではありません。とにかく、JavaScriptからPHPにデータをPOST通信で送りたいです。アドバイスのほど、よろしくお願いいたします。

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

回答2件

基本概念はフォームの処理と同じです。
送信する入力コントロールにnameを指定し、valueに値を指定する（valueはユーザーからの入力値が優先）
参照する際はmethodによって$_GETや$_POST
で配列のキーはnameの設定値にする。

それを同じようにkey:value形式のオブジェクトで送信してあげる必要があります。

js
1data: {hoge:'aaa'},

php
1$hoge = $_POST['hoge'];

あと下記のように書かれていますが、

js
1                //PHPから返ってきたデータの表示
2                alert(data);

PHP側では何も出力してないのでdataはnullとかになりませんか？
何かしら結果は返した方が良いかと思います。
処理が成功したら1とか失敗したら9とか。そこは仕様なので決めでいいと思いますが。

投稿2020/04/28 02:51

m.ts10806

総合スコア80875

NyankoTaisa

2020/04/28 05:43

ご指摘通りにJavaScriptをPHPを修正したところ、JavaScriptからPHPへPOSTでデータ送信することができました。また、alert(data);が空で返ってくるのがおかしいと思っていたのですが、確かにPHPで戻り値を設定しておりませんでした。自分では気づけていなかったです。ありがとうございました！

m.ts10806

2020/04/28 05:51

解決されたようで何よりです。 1つ1つコードの整合性をとっていけばどこかに「おかしいな」と感じる部分があると思うのでその感性も磨くようにしてみてください

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

ベストアンサー

PHP で$?POST['XX'];と指定がないのと
jqyery側でdataに名前がないのが原因という印象です。

サンプルで申し訳ありませんが、

jqueryの例）

<!DOCTYPE html> <html> <head> <title>PHPとの間でAjax通信をおこなう</title> <meta charset="utf-8"> <script src="js/jquery.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#submit_bt").click(function(event){ //フォームが通常の動きをしないように event.preventDefault(); //初期化 $("#ajax_result").empty(); test(); }); }); function test(){ var word_val1=$("#word_id1").val(); var word_val2=$("#word_id2").val(); $.ajax({ type: 'POST', url: 'test0.php', data:{ word1:word_val1, word2:word_val2 }, dataType: 'html', }) //$.post('./test.php', {word1:word_val1,word2:word_val2}) .done(function(data, status, jqXHR){ $("#ajax_result").html(data); //$("#ajax_result").html(data.word1 +"と"+ data.word2);//PHPからJSON形式で返ってくる場合 }) .fail(function(jqXHR, status, error){ $("#ajax_result").html("エラーです"); }) .always(function(jqXHR, status){ console.log(status); }); } </script> <head> <body> <form method="post"> <input type="text" value="りんご" name="word1" id="word_id1" /> <input type="text" value="バナナ" name="word2" id="word_id2" /> <input type="submit" value="送信" id="submit_bt" /> </form> <div id="ajax_result"></div> </body> </html>

PHPの受け取り側

<?php $word1 = $_POST['word1']; $word2 = $_POST['word2']; echo "<p>{$word1}と{$word2}を入力しました。</p>";

投稿2020/04/28 02:07