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

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

解決済

4回答

2252閲覧

Ajax+PHPでPOSTの受け渡しについて

swallowtail

総合スコア60

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クリップ

投稿2017/02/05 03:47

編集2017/02/05 04:26

タイトルの通りなのですが、PHP+AjaxでのPOSTの送受信についてお伺いしたいと思います。
JavaScriptで遷移無しにFormから確認画面を経由してDataBaseに登録という流れを作る場合に
下記のコードでいけると思ったのですが、何故か確認画面でpostが飛んできておらずエラーが吐き出されます。
色々調べて見たのですが、原因がわかりません。
初歩的な質問だとは思いますが、どうぞ宜しくお願い致します。

javascript

1// Frame.php(一部抜粋) 2 3<div class="wrap"> 4</div> 5 6<script type="text/javascript"> 7$(function(){ 8 "use strict"; 9 10 var $content = $('.wrap'); 11 var param1 = $('.test1').val(); 12 var param2 = $('.test2').val(); 13 var myDisplay = 'index.php'; 14 15 getPage('index.php'); 16 17 $(document).on('click', '.btn', function(event){ 18 event.preventDefault(); 19 var link = $(this).attr('href'); 20 if(link !== myDisplay){ 21 $content.html(function(){ 22 getPage(link); 23 }); 24 myDisplay = link; 25 } 26 }); 27 28 function getPage(element){ 29 var promise = $.ajax({ 30 type: 'POST', 31 url: element, 32 data: { 33 test1: param1, 34 test2: param2 35 } 36 }); 37 promise.done(function(data){ 38 $content.html(data); 39 }); 40 } 41}); 42</script> 43

html

1// index.php 2 3<form action="" method="post"> 4 <input type="text" name="textTest" class="test1" value=""> 5 <input type="text" name="textTest" class="test2" value=""> 6 <a name="test" class="btn btn-default" href="confirm.php">送信</a> 7</form> 8

php

1// confirm.php 2 3<?= $_POST['test1'] ?> 4

吐き出されるエラーは以下の通りです。

Notice: Undefined index: test1 in C:\xampp\htdocs\test\confirm.php on line 2

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2017/02/05 03:53

エラーを記述して下さい。
swallowtail

2017/02/05 04:09

すみません。エラーの記述を追加しました。宜しくお願いします。
s8_chu

2017/02/05 04:28

aタグで入力したデータを渡そうとしているのですか?また、それぞれのファイルの関係がいまいち掴めないので追記していただけたらうれしいです。
guest

回答4

0

param1とparam2に値を設定しているタイミングがページロードの時であり、クリックされた時点ではないため、test1, test2ともに値が設定されずに実行されるからなのではないでしょうか?

あと、

js

1$content.html(function(){ 2 getPage(link); 3});

js

1promise.done(function(data){ 2 $content.html(data); 3});

と$content.htmlを設定しているところが2か所あるのですが、前者は不要でgetPage(link)だけでいいのでは?

投稿2017/02/05 04:31

turbgraphics200

総合スコア4267

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

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

swallowtail

2017/02/05 04:39

有難う御座います!自己解決文を書いているときにお答え頂いて申し訳ありませんでした。 その通りでした。見落としと言うかケアレスミスと言うか、なんともお恥ずかしい限りです。 また宜しくお願いいたします。
guest

0

自己解決

皆さん、ご返信有難う御座います。色々見直した結果
var param1
var param2
の記述の位置が間違って要る事に気づきました。

初歩的な事で皆さんのお手を煩わせてしまい本当に申し訳ありませんでした。

--解決方法--
function getPage(element){
var param1
var param2
}
とすることで解決しました。

投稿2017/02/05 04:36

swallowtail

総合スコア60

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

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

0

少し気になる部分があるのですが、

var param1 = $('.test1').val();
var param2 = $('.test2').val();

最初の読み込み時は、まだ inputフィールドには値が入っていないと思いますが その辺は大丈夫でしょうか?

投稿2017/02/05 04:20

cordovaonsen

総合スコア38

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

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

swallowtail

2017/02/05 04:24

今見ていて自分もそれに気づいたのですが、何故か条件式を入れてもいないのに最初の読み込み時にはエラーは出てきてないです。
cordovaonsen

2017/02/05 04:35

見つからないだけで特にエラーにはならないので大丈夫ですが、ページ遷移のときに取得しないと 値が正しく取れないまま遷移してしまうことになります。
guest

0

ちょっと私がいつも使っているテンプレートと違うので、詳細は追っていないのですが、エラーメッセージを見る限り、うまく post 出来ていないのだと思います。

Ajax の切り分けは、ブラウザの開発ツールを使用するのが便利です。
ちゃんと post されているかどうか、開発ツールから追ってみてはいかがでしょうか?

投稿2017/02/05 04:16

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

swallowtail

2017/02/05 04:25

console.log()で見てるのですが、postが全く飛んできてないです。
退会済みユーザー

退会済みユーザー

2017/02/05 04:28

console.log()で見るのではなく、chrom であればネットワークタブの情報で見て下さい。 ファイルネームをクリックするとそのファイルとの通信内容が表示されます。 ヘッダ情報を見ることで、post の情報を確認することが出来ます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問