前提・実現したいこと
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の値が取れません。
回答1件
あなたの回答
tips
プレビュー