やりたいこと

カレンダーが表示されている画面で次の月ボタンを押したときに、カレンダーの書き換えをAjaxで行いたい。
jQueryを使用せずに実装したい。

#思い描いている流れ
・カレンダーが表示されている画面でボタン押下。
・jsファイルのAjax処理が動きSpringのControllerへ値を渡す。
・Springで処理をした後また画面へ返す。
・カレンダー表示画面でカレンダー書き換え。

#現実
・Ajaxのsend()部分で404が返ってきている。
・今までAjaxはjQueryで書いていたので処理の書き方が間違っているのかurl指定が間違っているのかわからない。

.とりあえずSpringのController部分まで処理を通したい

#ソース

html
1<div id="date">
2    <p class="display-month" id="year" th:text="${scheduleIndexForm.calendar.get('year')}"></p>
3    <p>年</p>
4    <p class="display-month" id="month" th:text="${scheduleIndexForm.calendar.get('month')}"></p>
5    <p>月</p>
6    </div>
7
8    <div class="change-month">
9    <input type="button" id="previous-month" th:value="#{previousmonth}">
10    <input type="button" id="next-month" th:value="#{nextmonth}">
11    </div>

js
1window.onload = function () {
2　　//ここの値はきちんと入ってきている
3    let year = document.getElementById("year").textContent;
4    let month = document.getElementById("month").textContent;
5    let formData = JSON.stringify({
6        "calendar":{
7            "year" : year,
8            "month" : month
9        }
10    });
11
12    //次月へボタン押下時処理
13    let nextMonth = document.getElementById("next-month");
14    nextMonth.addEventListener("click", function () {
15　　　　//ここのURL間違ってる？
16        doAjaxPost(formData, "schedule/top", function(resData){
17            //とりあえず確認のため簡単な書き換えにしている
18            let dateInf = document.querySelector("#date");
19            dateInf.textContent = "";
20            dateInf.appendChild = 'OK';
21
22        });
23
24    });
25
26}
27
28//POST通信のajax処理
29function doAjaxPost(data, url, callback){
30    let request = new XMLHttpRequest();
31
32    request.onreadystatechange = function () {
33        if(request.readyState == 4 && request.status == 200){
34            try{
35                let result = JSON.parse(request.responseText);
36            }catch(err){
37                console.log(err.message);
38                return;
39            }
40            callback(result);
41
42        }
43
44    }
45
46    request.open("POST", url , true);
47    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
48    request.responseType = "json";
49　　//ここでエラーが出る
50    request.send(data);
51
52
53}

java
1@RequestMapping(path="schedule/top", method=RequestMethod.POST)
2    @ResponseBody
3    public ScheduleIndexForm makeAjaxCalendar(@ModelAttribute(FORM_NAME) ScheduleSessionForm session,@RequestBody ScheduleIndexForm scheduleIndexForm, Model model, @PathVariable int id) throws Exception{
4
5        Map<String,String> map = scheduleHelper.getDateMap(Integer.parseInt(scheduleIndexForm.getCalendar().get("year")),Integer.parseInt(scheduleIndexForm.getCalendar().get("month")));
6
7        return new ScheduleIndexForm(
8                scheduleHelper.scheduleTypeEntitiyListToScheduleTypeFormList(scheduleService.getScheduleTypeEntityAll()),
9                map,scheduleHelper.createDayInfoForm(map, scheduleHelper.getScheduleFormListForIndex(
10                        scheduleService.getAllScheduleEntityByMonth(Integer.parseInt(map.get("year")),Integer.parseInt(map.get("month"))))));
11
12    }

Javaのコントローラー部分にブレークポイントを張っているがそこまで来ていないのでpathの指定が間違っているのかとも思っている。

#やったこと
Ajax部分の処理方法は5通りほど試したが無理だった。
Springとの連携の際に気を付けなくてはいけないことが書かれているサイトがあればそれだけでも教えてほしい。
Spring徹底入門はかなり目を通したがvanillaJSでのAjax操作まではさすがに記載はなかった。

行動規範の内容に同意します

回答1件

ベストアンサー

schedule/top のように始めると現在のURLからの相対パスになります。
そこでズレが起きてるのではないでしょうか。
フレームワークではコンテキストパスなども絡んでくるし、
どこから実行されるか分からないのであれば絶対パスとなるように指定したいところ。

そもそもですが、URLはThymeleafの機能で構成したものを利用するのが確実かと思います。
例えば、hiddenで埋め込んでおくとか。

Thymeleaf
1
2<input type="hidden" id="ajax_uri" th:value="@{schedule/top}">

js
1
2doAjaxPost(formData, document.querySelector("#ajax_uri").value, function(resData){

投稿2021/07/31 20:53

m.ts10806

総合スコア80875

squall-leon

2021/08/01 02:45

m.ts10806さんありがとうございます。おっしゃっていただいた通りにしたところステータスコードが500になり、java側のコードが間違っていることをeclipseが教えてくれました。そして、javaの受け取り部分の消し忘れていた@PathVariable int id部分を削除したらきちんとjavaのメソッドまで進むことができました。アドバイスいただきありがとうございました。