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

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

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

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

Ajax

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

Q&A

解決済

1回答

919閲覧

javascriptでとれた値をphpファイルに渡したいです。

gyo_gyo_gyo

総合スコア1

JavaScript

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

Ajax

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

0グッド

0クリップ

投稿2020/06/24 12:01

編集2020/06/24 12:21

前提・実現したいこと

javascriptでとれた値をphpファイルに渡したいです。
ajaxでこのコードでは値はいかないのでしょうか??

発生している問題・エラーメッセージ

ありません

該当のソースコード

javascript

1<!DOCTYPE html> 2 3 4<lang="ja"> 5 6<head> 7 <meta charset="UTF-8"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title>カレンダー</title> 10</head> 11 12<body> 13 <button id="prev" type="button">前の月</button> 14 <button id="next" type="button">次の月</button> 15 <div id="calendar"></div> 16 17 18 19 <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> --> 20 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 21 <script> 22 const weeks = ['日', '月', '火', '水', '木', '金', '土'] 23 const date = new Date() 24 let year = date.getFullYear() 25 let month = date.getMonth() + 1 26 const config = { 27 show: 3, 28 } 29 30 function showCalendar(year, month) { 31 for (i = 0; i < config.show; i++) { 32 const calendarHtml = createCalendar(year, month) 33 const sec = document.createElement('section') 34 sec.innerHTML = calendarHtml 35 document.querySelector('#calendar').appendChild(sec) 36 37 month++ 38 if (month > 12) { 39 year++ 40 month = 1 41 } 42 } 43 } 44 45 function createCalendar(year, month) { 46 const startDate = new Date(year, month - 1, 1) // 月の最初の日を取得 47 const endDate = new Date(year, month, 0) // 月の最後の日を取得 48 const endDayCount = endDate.getDate() // 月の末日 49 const lastMonthEndDate = new Date(year, month - 2, 0) // 前月の最後の日の情報 50 const lastMonthendDayCount = lastMonthEndDate.getDate() // 前月の末日 51 const startDay = startDate.getDay() // 月の最初の日の曜日を取得 52 let dayCount = 1 // 日にちのカウント 53 let calendarHtml = '' // HTMLを組み立てる変数 54 55 calendarHtml += '<h1>' + year + '/' + month + '</h1>' 56 calendarHtml += '<table>' 57 58 // 曜日の行を作成 59 for (let i = 0; i < weeks.length; i++) { 60 calendarHtml += '<td>' + weeks[i] + '</td>' 61 } 62 63 for (let w = 0; w < 6; w++) { 64 calendarHtml += '<tr>' 65 66 for (let d = 0; d < 7; d++) { 67 if (w == 0 && d < startDay) { 68 // 1行目で1日の曜日の前 69 let num = lastMonthendDayCount - startDay + d + 1 70 calendarHtml += '<td class="is-disabled">' + num + '</td>' 71 } else if (dayCount > endDayCount) { 72 // 末尾の日数を超えた 73 let num = dayCount - endDayCount 74 calendarHtml += '<td class="is-disabled">' + num + '</td>' 75 dayCount++ 76 } else { 77 calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>` 78 dayCount++ 79 } 80 } 81 calendarHtml += '</tr>' 82 } 83 calendarHtml += '</table>' 84 85 return calendarHtml 86 } 87 88 function moveCalendar(e) { 89 document.querySelector('#calendar').innerHTML = '' 90 91 if (e.target.id === 'prev') { 92 month-- 93 94 if (month < 1) { 95 year-- 96 month = 12 97 } 98 } 99 100 if (e.target.id === 'next') { 101 month++ 102 103 if (month > 12) { 104 year++ 105 month = 1 106 } 107 } 108 109 showCalendar(year, month) 110 } 111 112 document.querySelector('#prev').addEventListener('click', moveCalendar) 113 document.querySelector('#next').addEventListener('click', moveCalendar) 114 // const day = e.target.dataset.date 115 document.addEventListener("click", function (e) { 116 if (e.target.classList.contains("calendar_td")) { 117 alert('クリックした日付は' + e.target.dataset.date + 'です') 118 // // send.phpにおくりたいデータをjSON形式で書く 119 $.ajax({ 120 type: 'post', 121 url: "dream_ajax.php", 122 data: { "value1": e.target.dataset.date }, 123 success: function (result) { 124 //非同期通信に成功したときの処理 125 126 } 127 }); 128 129 130 131 } 132 }) 133 134 showCalendar(year, month) 135 </script> 136</body> 137 138</html>
```php <?php $value1 = "value1"; $value = array( 0 => 1, ); // 何らかの処理をする・・・ echo json_encode($value); exit; ?>

試したこと

ajaxで値を渡そうと試みました。

補足情報(FW/ツールのバージョンなど)

ajaxの値が取れません。

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

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

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

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

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

m.ts10806

2020/06/24 12:13

あと、dream_ajax.phpのコードも提示してください。
m.ts10806

2020/06/24 12:14

もう1点 >window.location.href = 'dream_ajax.php'; 上記コードを入れた意図が不明です。
gyo_gyo_gyo

2020/06/24 12:45

ご指摘ありがとうございます。編集行いました。 window.location.href = 'dream_ajax.php';はページを飛ばすのに必要かと思い記述してました。
guest

回答1

0

ベストアンサー

Ajaxによる非同期通信もform送信と同じです。
PHPでは$_POSTまたは$_GET で受け取ります。
※ただ、form送信であっても$_POSTまたは$_GETよりもfilter_input()のほうが推奨されます

form送信では入力コントロール(input,select,textarea)のnameをキーとした連想配列で受け取るのですがAjaxではそのnameをJavaScriptのオブジェクト{}にてkey:valueの形式で指定します。

今回は

"value1": e.target.dataset.date

としているのでvalue1をkeyとして値が取れます。

window.location.href = 'dream_ajax.php';はページを飛ばすのに必要かと思い記述してました。

非同期通信はページ遷移を伴わないサーバー通信手段なので「ページ」という概念はいったん忘れてください。
なので、デバッグの際は、ログファイルに書き出すとか、意図的に値を返すとか工夫が必要です。

投稿2020/06/24 13:04

m.ts10806

総合スコア80875

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問