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

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

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

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

JavaScript

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

Ajax

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

3回答

3626閲覧

ajaxのページ切り替えの際にPHPでインクルードしたものの表示の入れ変え

konpei_konpei

総合スコア20

PHP

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

JavaScript

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

Ajax

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/08/22 07:59

編集2022/01/12 10:55

###前提・実現したいこと
インクルードしたものをformで飛んできた数字によって切り替えるといった事をajxaで行いたくご質問させていただく次第になりました。
``
受信部分をどのように設定すればよろしいでしょうか?
ご教授宜しくお願いいたします。
form.php

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content=""> 6<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0"> 7<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 8<script type="text/javascript"> 9$(function() { 10 $('input[type=button]').click(function() { 11 // Ajax通信 12 //送信部分 13 $.ajax({ 14 url : 'check.php', 15 type : 'post', 16 dataType : 'json', 17 data : { 18 val: $('input[type=button]').val()//項目名:データ 19 } 20 }) 21 //受信部分 22 .done(function(response) { //responseは変数名responseが戻り値受領用変数,自動的に連想配列になっている 23 if(response.res==1) { 24 $('div').html('');//ここに何かを入れる。 25 }elseif(response.res==2) { 26 $('div').html('');//ここに何かを入れる。 27 } 28 }else{ 29 $('div').html('');//ここに何かを入れる。 30 } 31 }) 32 .fail(function() {//エラーが起きた場合 33 alert('通信失敗') 34 }); 35 }); 36}); 37</script> 38<title>切り替え画面</title> 39</head> 40<body> 41 <form class="form_left" method="POST" action="form.php"> 42 <input type="button" value="1"> 43 <input type="button" value="2"> 44 </form> 45 <div id="prices_select"> 46 <?php include('check.php');//切り替え要素 ?> 47 </div> 48</body> 49</html>

check.php

PHP

1<?php 2//データ受領はPOSTでOK 3$val=htmlspecialchars($_POST['val']); 4 5//データベース検索 6if($val==1){ 7 $cnt[]=1; 8 //それともここに何かを入れる? 9}if($val==2){ 10 $cnt[]=2; 11 //それともここに何かを入れる? 12}else{ 13 $cnt[]=3; 14 //それともここに何かを入れる? 15} 16 17//結果戻し 18header('Content-type: application/json charset=utf-8'); 19$res=array('res' => $cnt); //返信データを連想配列にセット 20echo json_encode($res); //連想配列をJSONで戻す 21?>

素人で大変申し訳ありません。。。
皆様よりご指摘いただいた事もあり文の追加をさせていただきます。
今回質問した目的が
最終的にはウインドウのサイズにより読み込むインクルードを切り替えるといった事が目的でした。
さらに手動でサイズも変更した際にも切り替わる。といったプログラムを作ろうと思っておりました。
その際サイズを手動で動かした際に読み込むインクルードを変更するにはまた再度サーバーに通信をしなくてはならないと思いその際ajax以外の手法が思いつかずajaxを使う流れになったのですがその際ajxaに関しての知識が全くなくどのようにすればよいのかわからずこういった質問になってしましました。
大変申し訳ありません。
もし意図が伝わっておりご教授いただける点がありましたらお手数とはなりますが宜しくお願いいたします。。。

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

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

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

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

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

guest

回答3

0

$('input[type=button]').click(function() {

の中で、「$('input[type=button]').val()」を参照してますが
「$(this).val()」じゃなくて大丈夫ですか?

投稿2016/08/22 08:15

yambejp

総合スコア114503

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

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

konpei_konpei

2016/08/22 08:31

ご回答ありがとうございます! そうですね。。。大変失礼いたしました。
guest

0

そもそもの発想に間違いがあるので、個別にどこが間違いとは指摘しにくいですが、
<?php include('check.php');//切り替え要素 ?>
の記載があるので、PHP と Javascript の挙動に関しても基本が理解できていないです。
Javascript で要素を更新するサンプルは数多くあるので、まず基本から学ばれてはいかがですか?

投稿2016/08/22 08:12

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

konpei_konpei

2016/08/22 08:48 編集

コメントありがとうございます。 素人で大変申し訳ありません。。。 ご指摘の意図すら理解できませんでした。。。 今回質問した目的が 最終的にはウインドウのサイズにより読み込むインクルードを切り替えるといった事が目的でした。 さらに手動でサイズも変更した際にも切り替わる。といったプログラムを作ろうと思っておりました。 その際サイズを手動で動かした際に読み込むインクルードを変更するにはまた再度サーバーに通信をしなくてはならないと思いその際ajax以外の手法が思いつかずajaxを使う流れになったのですがその際ajxaに関しての知識が全くなくどのようにすればよいのかわからずこういった質問になってしましました。 大変申し訳ありません。 もし意図が伝わっておりご教授いただける点がありましたらお手数とはなりますが宜しくお願いいたします。。。
退会済みユーザー

退会済みユーザー

2016/08/22 10:18

すでに回答しているとおりなのですが、PHPと Javascript の挙動を理解していないので、まず基礎から勉強されることをおすすめします。 https://teratail.com/questions/45067 背景はこちらの質問だったということですよね? flied_onion さんがすでに回答されているとおりです。 同じような質問をいつまで続けても、基礎を学ばないと前に進まないですよ。。。
guest

0

ウインドウのサイズにより読み込むインクルードを切り替える

こういう実装はあまりしないと思います。内容によりますが両方の要素をページ読み込み時に取得しておいて、メディアクエリ(もしくはjs)で切り替えます。

【レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ】
http://sole-color-blog.com/blog/php/71/


下記のようにインクルードされるつもりであるということは、当該ページはPHPということでしょう。
その場合 check.php の header関数でエラーが出ませんか?

PHP

1<?php include('check.php');//切り替え要素 ?>

Ajax はまずPHPを絡まさずに、HTMLとjsだけで実装方法を確認した上で、組まれたほうが良いと思います。

【jQuery入門 (全20回) - プログラミングならドットインストール】
http://dotinstall.com/lessons/basic_jquery_v2

投稿2016/08/22 11:34

kei344

総合スコア69357

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問