Q&A
HTMLはコードブロック (UIでは < /> 、文字入力では ``` で挟む）にしてください
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 6<script> 7 function week(nam){// Ajax通信 8 //送信部分 9 $.ajax({ 10 url : 'check.php', 11 type : 'post', 12 dataType : 'json', 13 data : { 14 val: nam//項目名:データ 15 } 16 }) 17 //受信部分 18 .done(function(response) { //responseは変数名responseが戻り値受領用変数，自動的に連想配列になっている 19 if(response.res!=0) { 20 $('div').html('');//ここに何かを入れる。 21 }else{ 22 } 23 }) 24 .fail(function() {//エラーが起きた場合 25 alert('通信失敗') 26 }); 27 } 28</script> 29<title>入力フォームサンプル</title> 30</head> 31<body> 32<p onClick="week(-7)">前の週</p> 33<p onClick="week(7)">次の週</p> 34<?php include('week.php'); // ヘッダー要素 ?> 35</body> 36</html>
PHP
1インクルードにより現在表示されているページ 2<div> 3<?php 4date_default_timezone_set('Asia/Tokyo'); 5$day_count=-1; 6$d=date("Y/m/d",strtotime($day_count.'day')); 7$a = strtotime($d); 8$week_name = array("日", "月", "火", "水", "木", "金", "土"); 9for($i=0; $i<7; $i++): 10 $a = strtotime( "1day", $a ); 11 $date= date("d/w/",$a); 12 $date=explode("/",$date); 13?> 14 <p><?=$date[0]?><span>(<?=$week_name[$date[1]]?>)</span></p> 15<?php 16endfor; 17?> 18</div>
###前提・実現したいこと
一週間毎にページを切り替えるものを作っています。
実行したい内容としては
前の週をクリックするとページが切り替わらず現在表示されているものから1週間前の日にちが表示され
次の週をクリックするとページが切り替わらず現在表示されているものから1週間次の日にちが表示されるようなプログラムを制作予定です。
###発生している問題・エラーメッセージ
現状はまだHTMLに一週間の日にちが表示されるだけとなっており
ajaxの受信に何を受信すればいいのか、判定のcheck.phpでは何を判定すればいいのかがわからず困っております。
ご教授宜しくお願いいたします。
通常表示されるヘージ
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<title>入力フォームサンプル</title> 6</head> 7<body> 8<p onClick="week(-7)">前の週</p> 9<p onClick="week(7)">次の週</p> 10<div> 11<p>22<span>(月)</span></p> 12<p>23<span>(火)</span></p> 13<p>24<span>(水)</span></p> 14<p>25<span>(木)</span></p> 15<p>26<span>(金)</span></p> 16<p>27<span>(土)</span></p> 17<p>28<span>(日)</span></p> 18</div> 19</body> 20</html>
次の週が押された際クリックされるページ
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<title>入力フォームサンプル</title> 6</head> 7<body> 8<p onClick="week(-7)">前の週</p> 9<p onClick="week(7)">次の週</p> 10<div> 11<p>29<span>(月)</span></p> 12<p>30<span>(火)</span></p> 13<p>31<span>(水)</span></p> 14<p>01<span>(木)</span></p> 15<p>02<span>(金)</span></p> 16<p>03<span>(土)</span></p> 17<p>04<span>(日)</span></p> 18</div> 19</body> 20</html>
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。「うまく動作しません」とはどのような状況でしょうか。出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。
初心者過ぎて申し訳ありません…
そういったすぐに修正しようと思いますがどちらにそういった仕様書みたいなものはありますでしょうか？
ご指摘ありがとうごさいます。
質問のUIだと</>ではなく <code> ボタンのようです。あと、最初のhtmlファイルにもphpコードが含まれているようですが？
質問のUIちがうのか・ｗ・（統一すれよとおもった）
ほんとにｗ 私も最初 </> って書いてたら、（ </> に）文字化けしてるみたいです＞＜ と言われ「質問する」で見てみたら違ってました orz
スマートフォンからの投稿ですとUIが違いご指摘の意図が把握できませんでした。。。
大変申し訳ありません。
PCより投稿し解決いたしました！
クリックしたら何がどこに表示されるのかをHTMLで書いてみてください。
追加いたしました。
次週（前週）の一覧をJSONで返すPHPがまったくわからないってことですか？
ajxa初心者で大変申し訳ありません。。。
現状ですと
クリックした際
<?php
//データ受領はPOSTでOK
$nam=htmlspecialchars($_POST['val']);
//データベース検索
if($nam==7){
$cnt[]=7;
}else{
$cnt[]=-7;
}
//結果戻し
header('Content-type: application/json charset=utf-8');
$res=array('res' => $cnt); //返信データを連想配列にセット
echo json_encode($res); //連想配列をJSONで戻す
?>
で７を送ってその後どうするかで困っております。。。
7を送ったら、ページ側（ブラウザ側のjavascript）は7しか受け取れません。
7を使ってページの書き換えをjavascriptで行うしかありません。
それでは足りないのであれば何を返せばページを書き換えられるか考えます。
まずはDB検索など考えず、固定で何かを返すcheck.phpで、どういうデータを返せばページを書き換えられるか考えてみると良いと思います（もっといえば、まずはajaxなしで、javascriptでページを書き換える方法を考えて見た方がいいかも。それに必要な情報をcheck.phpは返さないといけないので）。
ありがとうございます。
また一から作り直してみます。
これはこれで残しておいて、別のファイルでやり取りや書き換えを（もっと書き換える部分の少ないもので）試してみると良いと思いますよ。
今回やりたい事が最終的にはデータベースを使って予約の管理ができるシステムを作ろうとしてまして、そちらをphpで呼び出し表示する事には成功したのですがこの次の週をクリックすると次の週になるのところのみ上手くいかず…
phpで日付を取得して書き出していたのでajaxでphpがイルクルードする前に書き換えるって感じにしなきゃいけないのかな？と悩み結果こんな事態で混乱してしまっています。
なのでイルクルードでクリックがあった際にチェックで呼び出す文に7を足してさらにクリックするボタンにも7を追加すれば次の週になるのかな？
と思い動いた次第で…
伝えたい事が伝わってるかわかりませんがどうすればいいのか混乱してしまってるので今一度整理してみます…
回答3件
0
ベストアンサー
phpで日付を取得して書き出していたのでajaxでphpがイルクルードする前に書き換えるって感じにしなきゃいけないのかな？
後半で思い描いていたのがどういうのかわかりませんが、ブラウザ側でphpが動作することはありません（それはわかってると思いますが）、最初に表示されたときにはもうincludeは終わっています。
javascriptを使ってできるのは、week.php（インクルードってこれのことですよね？） 相当の事をjavascriptでやる(そのための情報（開始日付とか）をajaxを使ってサーバーと通信してcheck.phpからもらう）。つまりjavascriptで日付のところを丸ごと作り替える。
か、week.phpが出力している内容をajaxを使ってcheck.phpでサーバーでほとんど組み立ててもらい、返す。やはりjavascriptで書き換えるが、書き換える内容（タグやらテキストやら）のほとんどはphp側で組み立てる。
大きくいってこの二つに分かれます。返却する情報とjavascript側がどれぐらい書き換えに携わるかといった調整の違いなので、半々ぐらいで頑張るという事もできなくもないです。
いずれにしても、「ajaxでサーバーを呼び、何か返してもらい、その何かを既存のページのどこかに出力させる」の簡単版ができなければ想像は難しいと思います。なのでまずは別のページで練習してみては。
とコメントしました。
投稿2016/08/21 17:01
総合スコア2604
0
「次の週」しか実装していませんが、ただ日をずらす程度なら JavaScriptだけで十分な気がします。
JavaScript
1$( function() { 2 var $_list = $( '#data-list' ); 3 var weekDayList = [ '日', '月', '火', '水', '木', '金', '土' ] ; 4 5 $( '.next_week' ).click( function() { 6 var current = new Date( $_list.attr( 'data-date' ) ); 7 current.setDate( current.getDate() + 7 ); 8 var year = current.getFullYear(); 9 var month = ( '0' + ( current.getMonth() + 1 ) ).slice( -2 ); 10 var date = ( '0' + current.getDate() ).slice( -2 ); 11 $_list.attr( 'data-date', year + '/' + month + '/' + date ); 12 13 var i, d, w, res = ''; 14 for ( i = 0; i < 7; i++ ) { 15 current.setDate( current.getDate() + ( i === 0 ? 0 : 1) ); 16 d = ( '0' + current.getDate() ).slice( -2 ); 17 w = weekDayList[ current.getDay() ]; 18 res += '<li>' + d + '<span>(' + w + ')</span></li>'; 19 } 20 21 $_list.html( res ).attr( 'data-date', year + '/' + month + '/' + date ); 22 } ); 23} ); 24```**動くサンプル：**[https://jsfiddle.net/q436wnLc/](https://jsfiddle.net/q436wnLc/)
投稿2016/08/21 18:05
編集2016/08/21 18:07総合スコア69400
To: flied_onionさん
> 質問のUIだと</>ではなく <code> ボタンのようです。
少し前までは両方同じだったのですが、いつの間にか変わっていたのですね、情報ありがとうございます。（なんで回答欄は変わらないのだろう…）
質問投稿欄のUIに対する要望スレッドにて「</>より<code>のほうが」という指摘があったので、だれかが改善要求を出してくれたのかもしれませんね。
なるほど、以前は同じだったんですね。
情報ありがとうございます。
しかし、テンプレからくみ取ってくれない人はなかなか減りませんね。
テンプレートの存在に気づかない人が多そうな気がする。
CKEditorもどきを使わない人は
ご回答ありがとうございます。
こちらの JavaScriptに関しては今後の参考にさせていただきます。
ありがとうございました。
0
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8" /> 5<title>入力フォームサンプル</title> 6</head> 7<body> 8<?php 9 date_default_timezone_set('Asia/Tokyo'); 10if ($_SERVER['REQUEST_METHOD'] === 'POST'){ 11 $d=htmlspecialchars($_POST['week']); 12 $before=-7; 13 $after=7; 14 $day_before=date("Y/m/d", strtotime($d.$before.'day')); 15 $day_after=date("Y/m/d", strtotime($d.$after.'day')); 16}else{ 17 $day_count=-1; 18 $before=-8; 19 $after=6; 20 $d=date("Y/m/d",strtotime($day_count.'day')); 21 $day_before=date("Y/m/d",strtotime($before.'day')); 22 $day_after=date("Y/m/d",strtotime($after.'day')); 23 $d=date("Y/m/d",strtotime($day_count.'day')); 24} 25?> 26 <form method="POST" action="test.html"> 27 <input type="hidden" name="week" value="<?=$day_before?>" /> 28 <input type="submit" value="前の週" /> 29 </form> 30 <form method="POST" action="test.html"> 31 <input type="hidden" name="week" value="<?=$day_after?>" /> 32 <input type="submit" value="次の週" /> 33 </form> 34<?php include('week.php'); ?> 35</body> 36</html>
PHP
1 <div> 2<?php 3 $a = strtotime($d); 4 $week_name = array("日", "月", "火", "水", "木", "金", "土"); 5 for($i=0; $i<7; $i++): 6 $a = strtotime( "1day", $a ); 7 $date= date("d/w/",$a); 8 $date=explode("/",$date); 9?> 10 <p><?=$date[0]?><span>(<?=$week_name[$date[1]]?>)</span></p> 11<?php 12endfor; 13?> 14</div>
こちらで解決いたしました。皆様ご協力ありがとうございました。
投稿2016/08/22 09:20
総合スコア20
あなたの回答
tips
プレビュー
