質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

1081閲覧

Ajaxを使用してJavaScriptの値(Object)をPHPに送りたい

yuna3

総合スコア15

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/08/06 16:55

初歩的な質問で申し訳ありません。
掲題の通り、Ajaxを使用してJavaScriptの値(配列)をPHPに送り、表示したいのですが
PHPで表示しようとするとNULLとなっており、困っております。

■やりたいこと
チェックボックスで選択したものの値をJavaScriptからPHPに受け渡したいと考えております。

■確認したこと
JavaScript側でログを見たところ、配列に値は入っているため
PHPの受け取りがうまくできていないことがNULLの原因だと思っています。
※PHPでfor文を作成して値を取得するなどいろいろ試してみましたが、取得できず…現在の状態となっております。

JavaScriptで型をObjectに変えている処理ですが
色々なサイトを閲覧したところ、Ajaxで配列データを送る場合はObject型が良いと書かれていたため
このような書き方にしております。
すべてネットで調べた情報をもとにコードを記載しているため
基礎ができていない部分等あるかと思いますが、解決のヒントをいただけると嬉しいです。

※また、カスタムデータ(data-product)の取得方法がおかしなことになっていると思いますが、
いい方法が思いつかず、現在このような処理にしております…。
効率的な取得方法がありましたら、教えていただけると幸いです…。

よろしくお願いします。

HTML

<tr class="listTrDescription"> <td class="listTitleTdCheckbox"> <label><input type="checkbox" name="price" data-product="テスト1" value="1000" id="1"/></label> </td> </tr> <tr class="listTrDescription"> <td class="listTitleTdCheckbox"> <label><input type="checkbox" name="price" data-product="テスト2" value="1000" id="2"/></label> </td> </tr>

JavaScript

<script type="text/javascript"> $("#checkout").submit(function () { var sendProduct = []; //data-productを入れる var sendPrice = 0; //nameを入れる var flag = false; var additionProduct = 0; var max = document.product.price.length; //チェックボックスの数取得 var checkPrice = document.product.price; //チェックした値を取得 for(var i = 0; i < max; i++ ){ if(checkPrice[i].checked ){ flag = true; onePrice = document.product.price[i].value; //nameの値を取得 sendPrice = parseInt(sendPrice) + parseInt(onePrice); additionProduct = i; var answerProduct = additionProduct + 1 if(answerProduct == 1){ sendProduct[i] = document.getElementById("1").getAttribute("data-product"); }else if(answerProduct == 2){ sendProduct[i] = document.getElementById("2").getAttribute("data-product"); } } } var productObj = {};//array型の配列をObject型に変換 for(var i = 0; i < sendProduct.length; i++){ productObj[i] = sendProduct[i]; }      var data = { 'price':sendPrice, 'product':productObj,      }; var request = $.ajax({ type: "POST", url: "http://test.php", data:data, }); request.done(function(msg) { alert( "success" + msg ); }); request.fail(function(jqXHR, textStatus) { alert("エラーが発生しました。問い合わせから報告してください。"); alert( "Request failed: " + textStatus + jqXHR); }); }); </script>

alert( "success" + msg )で表示される文言

successstring(4)"2000" string(10)"テスト1" string(10)"テスト2"

PHP

<?php header('Access-Control-Allow-Origin:*'); header('Access-Control-Allow-Credentials: true'); if (version_compare(PHP_VERSION, '5.1.0', '>=')) {//PHP5.1.0以上の場合のみタイムゾーンを定義 date_default_timezone_set('Asia/Tokyo');//タイムゾーンの設定(日本以外の場合には適宜設定ください) } $sendProduct = array(); $sendPrice = $_POST['price']; $sendProduct = $_POST['product']; var_dump($sendPrice);//表示できている var_dump($sendProduct[0]);//表示できることを確認したい var_dump($sendProduct[1]);//表示できることを確認したい var_dump($sendProduct[2]);//表示できることを確認したい ?>

PHPの表示結果

string(4) "1000" NULL NULL NULL

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yukikp

2019/08/06 22:23 編集

http://test.phpって有効なんですね。(純粋に知らなかった) ・「JavaScript側でログを見たところ、配列に値は入っているため」というのは、具体的にどこの段階でどのようにログを出力したのでしょう?(console.logとか使ったのでしょうか?) ・「alert( "success" + msg )で表示される文言」をみると正しく処理されているように見えるのですが ・「PHPの表示結果」という意味が分からりません。。。Ajaxの実行結果(=「alert( "success" + msg )で表示される文言」)とは違うものでしょうか? ・HTMLの段階で、input[name=price]は2つしかないので、Ajaxの送信先で「var_dump($sendProduct[2]);//表示できることを確認したい」がある意味が分からないのですが、どういった意図でしょう?
takasima20

2019/08/06 23:10

dataに二次元配列的なデータはだめなんじゃない? あくまでPOSTされるデータなんで単純な形にしてやるっスよ。
m.ts10806

2019/08/07 00:14 編集

>http://test.php 実際にこう書いてたら「そりゃ動きませんよ」としか言えないですよ。
yuna3

2019/08/07 17:57 編集

ミスが多く申し訳ありません…。 ・http://test.phpって有効なんですね。(純粋に知らなかった) ・実際にこう書いてたら「そりゃ動きませんよ」としか言えないですよ。  →実際にはこのように書いていません、投稿時の修正ミスです失礼しました…。   実際は、http://〇〇.jp/〇〇.phpという書き方をしております。 ・「JavaScript側でログを見たところ、配列に値は入っているため」というのは、具体的にどこの段階でどのようにログを出力したのでしょう?  →array型の配列をObject型に変換した直後のproductObjの値をconsole.logとalertを使用して確認しました。 ・「PHPの表示結果」という意味が分からりません。。。  →phpでvar_dumpを使用してhttp://〇〇.jp/〇〇.php画面で表示された結果を「PHPの表示結果」と書かせていただいております。 Ajaxの実行結果(「alert( "success" + msg )で表示される文言」)と異なるものが表示されてしまう(配列がNULLになる)ため、悩んでおりました…。 ・HTMLの段階で、input[name=price]は2つしかないので、Ajaxの送信先で「var_dump($sendProduct[2]);//表示できることを確認したい」がある意味が分からないのですが、どういった意図でしょう?  →すみません、投稿時の記載ミスです、「var_dump($sendProduct[2]);」に意味はありません泣
yuna3

2019/08/07 17:57

・dataに二次元配列的なデータはだめなんじゃない? あくまでPOSTされるデータなんで単純な形にしてやるっスよ。  →二次元配列的なデータをPOSTするのは厳しいのですね…。ありがとうございます! 一旦、yukikpさんに教えていただいた$Form.serialize()でエラーにならずPOSTできる方法を調べてみます!
guest

回答2

0

ベストアンサー

送りたい配列をJSON.stringify(data)して受け取ったデータを
json_encodeしてください

投稿2019/08/07 00:22

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuna3

2019/08/07 17:20

ご回答いただき、ありがとうございます! 試してみました。 JS側で送りたい配列をJSON.stringify(data)してconsole.logで確認してみたところ、正常に値が設定されていました。 php側でjson_encodeしてみたところ、配列でないほうの値は正常に表示されるのですが、配列の方はうまくjson_encodeできず、NULLになってしまいました…。 phpには下記のように記載したのですが、原因はjson_encodeの方にあるのでしょうか…。 それとも、配列の送り方に原因があるのでしょうか…? ■phpに記載したjson_encode部分のコード $sendPrice = json_encode($_POST['price']); $sendProduct = json_encode($_POST['product'],JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE); var_dump($sendPrice); var_dump($sendProduct);
guest

0

何となくそれっぽく書いてみました。
ヒントになりますか?
test.html

HTML

1<form id="Form"> 2 <table> 3 <tr class="listTrDescription"> 4 <td class="listTitleTdCheckbox"> 5 <label><input type="checkbox" name="data[テスト1]" value="1000" id="1"/></label> 6 </td> 7 </tr> 8 <tr class="listTrDescription"> 9 <td class="listTitleTdCheckbox"> 10 <label><input type="checkbox" name="data[テスト2]" value="1000" id="2"/></label> 11 </td> 12 </tr> 13 <tr> 14 <td colspan="2"><input type="submit" value="送信" class="submit"></td> 15 </tr> 16 </table> 17</form> 18<script type="text/javascript"> 19 jQuery(function($){ 20 var $Form = $('#Form'); 21 $Form.submit(function(e){ 22 // HTMLでの送信をキャンセル 23 e.preventDefault(); 24 25 $.ajax({ 26 url: 'http://hogehoge.com/test.php', 27 type: 'POST', 28 data: $Form.serialize(), 29 success: function(msg){ 30 31           //chromeのDevToolsで確認 32 console.log(msg); 33 } 34 }); 35 }); 36 }); 37</script>

http://hogehoge.com/test.phpの中身

PHP

1$sendData = filter_input( INPUT_POST, 'data', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY ); 2var_dump( $sendData ); 3 4/*foreach( $sendData as $name => $value ){ 5必要ならばforeach文で中身を処理 6}*/ 7die();

投稿2019/08/06 23:28

編集2019/08/06 23:43
yukikp

総合スコア797

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuna3

2019/08/07 17:44

ご回答いただき、ありがとうございます! Formの内容ごとすべてphpに送る方法があったなんて…知りませんでした!! 記載いただいた通り試してみたのですが、phpでNULLが表示されてしまいました、 JavaScriptの下記部分の値をデバッグで覗いてみたところ、$Formには正常に値が入っておりましたが data部分でReferenceErrorが出ておりました。 >data: $Form.serialize() そのため、ReferenceErrorについて調べてみようと思います、 (すみません、時間がなく調べ切れておらず…取り急ぎ現状報告させていただきます。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問