Q&A
AJax で GETしたものが成功した場合、console.log だけで勝手に変更されると思いますか?
前提・実現したいこと
STS + SpringBoot + Thymeleafで一部データの書き換えをしたいです。
画面左側にメニューがあります。
①メニューをAPIで取得してリスト表示
②メニューclick時にAjaxでAPIを実行し、詳細のデータを取得
③右側に詳細のデータを表示
発生している問題・エラーメッセージ
エラーは表示されないが、③「ListProcTask」を実行しても、画面上アイテムが表示されない。
System.out.pringlnで確認すると、レスポンスのJSONは以下の通り受け取っていることがわかる。
json
1{"data":[{ 2 "id":"17", 3 "url":"http://localhost:8080/runtime/tasks/17", 4 "owner":null, 5 "assignee":"admin", 6 "delegationState":null, 7 "name":"子タスク1", 8 "description":null, 9 ..... 10 }] 11}
該当のソースコード
newpj.html
html
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org" lang="ja"> 3 4<head> 5 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"></meta> 6 <meta name="viewport" content="width=device-width, initial-scale=1"></meta> 7 <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"></link> 8 <link rel="stylesheet" href="css/theme.css" type="text/css"></link> 9 <link rel="stylesheet" href="css/style.css" type="text/css"></link> 10 <script src="js/jquery-3.3.1.min.js"></script> 11 <script src="js/popper.min.js"></script> 12 <script src="js/bootstrap.min.js"></script> 13 <script src="js/myjs.js"></script> 14</head> 15<body> 16 <nav class="navbar navbar-expand-md bg-primary navbar-dark"> 17 <div class="container"> 18 <a class="navbar-brand" href="#"><i class="fa d-inline fa-lg fa-cloud"></i> PJ Admin</a> 19 <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 20 <span class="navbar-toggler-icon"></span> </button> 21 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 22 <ul class="navbar-nav mr-auto"> 23 <li class="nav-item mx-2"> 24 <a class="nav-link" href="pjlist.html"><i class="fa fa-list-ul fa-fw"></i> All PJ</a> 25 </li> 26 <li class="nav-item mx-2"> 27 <a class="nav-link" href="mytasks.html"><i class="fa fa-fw fa-check-circle"></i> My Tasks</a> 28 </li> 29 <li class="nav-item mx-2"> 30 <a class="nav-link active" href="newpj.html"><i class="fa fa-fw fa-plus-square"></i> New PJ</a> 31 </li> 32 </ul> 33 <div class="btn-group" id="btn_setting"> 34 <button class="btn dropdown-toggle btn-primary border border-light" data-toggle="dropdown"> <i class="fa d-inline fa-lg fa-user-circle-o"></i> UserName </button> 35 <div class="dropdown-menu"> 36 <a class="dropdown-item" href="myaccount.html">My Account</a> 37 <a class="dropdown-item" href="setting.html">Setting</a> 38 <div class="dropdown-divider"></div> 39 <a class="dropdown-item" href="login.html">Logout</a> 40 </div> 41 </div> 42 </div> 43 </div> 44 </nav> 45 46 <div class="py-4"> 47 <div class="container"> 48 <div class="row"> 49 <div class="col-md-4"> 50 <div class="list-group" id="newpjlist"> 51 <a class="list-group-item list-group-item-action flex-column align-items-start" th:each="item : ${newpjlist}" th:id="${item.id}" th:name="${item.key}"> 52 <h5 class="mb-1" th:text="${item.name}" id="${item.id}"></h5> 53 <p class="mb-1" th:text="${item.description}"></p> 54 </a> 55 </div> 56 <a href="#" class="btn btn-link btn-block"> 57 more<i class="fa fa-fw fa-angle-double-down"></i> 58 </a> 59 </div> 60 <div class="col-md-8"> 61 <button type="button" class="btn btn-primary" id="btn_procStart">開始</button> 62 <div th:substituteby="taskpart::proctaskAjaxBody" th:fragment="proctaskAjax"></div> 63 </div> 64 </div> 65 </div> 66 </div> 67</body> 68 69</html>
taskpart.html
html
1<html xmlns:th="http://www.thymeleaf.org" lang="ja"> 2 3<head> 4 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"></meta> 5 <meta name="viewport" content="width=device-width, initial-scale=1"></meta> 6 <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"></link> 7 <link rel="stylesheet" href="css/theme.css" type="text/css"></link> 8 <link rel="stylesheet" href="css/style.css" type="text/css"></link> 9 <script src="js/jquery-3.3.1.min.js"></script> 10 <script src="js/popper.min.js"></script> 11 <script src="js/bootstrap.min.js"></script> 12 <script src="js/myjs.js"></script> 13</head> 14<body> 15 16 <!-- 書き換える部分 --> 17 <div id="singleSelectAjax" th:fragment="proctaskAjaxBody"> 18 <ul class="list-group"> 19 <li class="list-group-item" th:each="item2 : ${pjtasklist}" th:id="${item2.id}"> 20 <span th:text="${item2.name}"></span> 21 </li> 22 </ul> 23 </div> 24</body> 25 26</html> 27
myjs.js
javascript
1$(function(){ 2 $('#newpjlist .list-group-item').click(function(){ 3 var key = $(this).attr('name'); 4 5 //プロセスを開始する 6 $('#btn_procStart').click(function(){ 7 $.ajax({ 8 type :"POST", 9 url :"postStartProcess", 10 data :{ 11 "prockey":key 12 } 13 }).then(function(result){ 14 $('#btn_procStart').before('<div class="alert alert-success" role="alert">開始しました。</div>'); 15 $('#btn_procStart').attr('disabled','disabled'); 16 17 //プロセスのタスクを取得する 18 getTaskList(key); 19 20 console.log("成功"); 21 }, function(){ 22 $('#btn_procStart').before('<div class="alert alert-danger" role="alert">失敗しました。</div>'); 23 console.log("失敗"); 24 }); 25 }); 26 }); 27 28 //プロセスからタスク一覧を取得 29 function getTaskList(e){ 30 $.ajax({ 31 type :"GET", 32 url :"ListProcTask", 33 data :{ 34 "prockey":e 35 }, 36 success:function(result){ 37 console.log("成功"); 38 } 39 }); 40 } 41});
java
1package com.javasampleapproach.restactiviti; 2 3import java.util.HashMap; 4import java.util.Map; 5 6import org.springframework.beans.factory.annotation.Autowired; 7import org.springframework.boot.web.client.RestTemplateBuilder; 8import org.springframework.stereotype.Controller; 9import org.springframework.ui.Model; 10import org.springframework.web.bind.annotation.RequestMapping; 11import org.springframework.web.bind.annotation.RequestMethod; 12import org.springframework.web.bind.annotation.ResponseBody; 13import org.springframework.web.bind.annotation.RestController; 14import org.springframework.web.client.RestClientResponseException; 15import org.springframework.web.client.RestTemplate; 16 17@Controller 18public class ListProcTask { 19 20 @Autowired 21 private RestTemplateBuilder restTemplateBuilder; 22 23 //接続先URL 24 String url = "http://localhost:8080/runtime/tasks"; 25 26 @SuppressWarnings("unchecked") 27 @RequestMapping(value = "/ListProcTask", method = RequestMethod.GET) 28 public String ListTaskController(Model model,String prockey){ 29 try { 30 RestTemplate restTemplate = restTemplateBuilder.basicAuthorization("****","****").build(); 31 32 //requestbody 33 Map<String,String> processKey = new HashMap<>(); 34 processKey.put("processDefinitionKey", prockey); 35 Map<String, Object> result = restTemplate.getForObject(url,Map.class,processKey); 36 model.addAttribute("pjtasklist",result.get("data")); 37 System.out.println("result---->"+result.get("data")); 38 return "newpj::proctaskAjax"; 39 40 }catch(RestClientResponseException e) { 41 System.out.println( e.getMessage() ); 42 return "失敗"; 43 } 44 } 45} 46
試したこと
以下のサイトは見ました。「Spring boot ajax データ更新」などで一通り検索済み。
http://arakan-pgm-ai.hatenablog.com/entry/2017/04/13/194032
http://arakan-pgm-ai.hatenablog.com/entry/2017/04/11/225359
https://qiita.com/syukai/items/66cd9b0a37a0980f5185
補足情報（FW/ツールのバージョンなど）
STS
Version: 3.9.3.RELEASE
Build Id: 201803200915
Platform: Eclipse Oxygen.3 (4.7.3)
Javascript側で描画するのではなく、modelにデータを入れているのでThymeleafでマッピングされるかと思ったのですが使い方が違うのでしょうか？
成功しているなら getTaskList の success で console.log(result); を挿入してみてみるといいよ
Console.log(result);はしましたが"newpj::proctaskAjax"が帰ってきます。
マニュアルにそう書いてあるならそうなのかもしれませんね (笑)
マニュアル読んでもわからないので質問してるんですが…
期待されていることは、java側でthymeleafで展開されたHTMLをajaxで受け取りたいと言うことでしょうか?
Ajaxはあくまでトリガーとしてjavaの処理を起動して、出来ればjava側で画面の処理をしたいです。
ajaxではなく普通にpostすれば良いのではないでしょうか?
ajaxで受け取ったデータはjavascript側で自前で書き換える必要があります。
ありがとうございます。画面のある一部分だけデータ取得した上で描画したいのですが、Ajaxでなくてjava内で可能ですか？(java初心者のためよくわかっていません)。
newpj::proctaskAjax が Javascript のコンソールにでてくるなら実行しているコントローラーが違うと思われます。 ミニマムソースを別途作成する場合のアノテーションは正確にお願いします
回答1件
0
ベストアンサー
お調べになったhttp://arakan-pgm-ai.hatenablog.com/entry/2017/04/11/225359
にあるように getTaskListで受け取ったデータ（HTML）はjavascriptで書き換える必要があります。該当ページのコードをご自身の環境で動かしてみると理解できるかと思いますよ。
javascript
1 success : function(data,status,xhr) { 2 $("#resultDiv").html(data); 3 },
画面を更新するのはブラウザ側の役目なので、サーバー側のJavaだけでは画面更新はできません。
ブラウザーがサーバーにリクエストをして更新をするか、Javascriptによって現在表示している画面を書き換える必要があります。
投稿2018/04/01 13:24
編集2018/04/01 13:35総合スコア2404
あなたの回答
tips
プレビュー
