Es ist eine peinliche Geschichte, aber ich erstelle eine Beispielseite, auf der ein Baum mit den von der API erfassten Daten angezeigt und als Daten auf dem Bildschirm belassen wird. Bitte helfen Sie uns mit Ihrem Rat (Quellcode). Die Umgebung usw. sind unten aufgeführt. Folgendes möchten wir erreichen:
Json-Daten ⇒ Baum abrufen und anzeigen (Erstanzeige) ⇒ Schaltflächen im Baum (Plus-Taste usw.) ⇒ Json-Zieldaten erneut abrufen ⇒ Die erfassten Daten an einer beliebigen Stelle auf dem Bildschirm anzeigen Wenn die Taste gedrückt wird Zeige nur
-Buchhandlung
- BOOK
Ein Stück ☑️
＋ Hotel
＋ Elektrisch
＋ Yahyakuya
Display-Taste
Ort anzeigen[ein Stück]
Zeigen Sie die Informationen des markierten Teils an einer beliebigen Stelle in HTML (Thymianblatt) an. Der angezeigte Inhalt heißt im Bild "One Piece", und ich möchte die Anzahl der Seiten hinter den Kulissen zusammenführen.
Ich kann Json nicht durch Verknüpfung mit Ajax und Java erhalten und als Baum anzeigen. Wenn es realisierbar ist, kann entweder Ajax oder Java verwendet werden, aber die aktuelle Situation ist, dass ich nicht weiß, wie man Json in einem Baum anzeigt und wie man Json-Daten mit der Plus-Taste erneut aufruft.
@Service
public class ZipCodeService {
@Autowired
@Qualifier("zipCodeSearchRestTemplate")
RestTemplate restTemplate;
/**Beispiel für eine Such-API-Anforderungs-URL*/
private static final String URL = "http://zipcloud.ibsnet.co.jp/api/search?zipcode={zipcode}";
public ZipCodeDto service(String zipcode) {
return restTemplate.getForObject(URL, ZipCodeDto.class, zipcode);
}
}
@Controller
public class ZipCodeController {
@Autowired
ZipCodeService zpcService;
/**
*Beispiel für ein Eingabeformular
* @return "zipcode"
*/
@RequestMapping("/zipcode")
public String zipcodeForm(HttpSession session, Model model) {
return "zipcode";
}
/**
*Beispielinformationsanzeige
* @return "zipcode-confirm"
*/
@RequestMapping(value="/zipcode/confirm", method=RequestMethod.POST)
public String zipcodeConfirm(HttpSession session, Model model,
@RequestParam("zipcode") String zipcode){
//Nur obligatorische Prüfung, Nummern- / Ziffernprüfung entfällt
//Wenn null oder leer, wird im Eingabeformular eine Fehlermeldung angezeigt
if (zipcode == null || zipcode.equals("")) {
model.addAttribute("errorMessage", "Bitte geben Sie Ihre Postleitzahl ein.");
return zipcodeForm(session, model);
}
//Beispiel für einen Such-API-Serviceaufruf
ZipCodeDto zipCodeDto = zpcService.service(zipcode);
//Erweitern Sie die Liste und zeigen Sie sie mit Thymeleaf an
model.addAttribute("zipcodeList", zipCodeDto.getResults());
return "zipcode-confirm";
}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Installationsbeispiel</title>
<link rel="stylesheet" type="text/css" href="/content/lib/yui/build/treeview/treeview.css?_yuiversion=2.4.1" />
<link rel="stylesheet" type="text/css" href="/content/lib/yui/build/treeview/tree.css?_yuiversion=2.4.1" />
<script type="text/javascript" src="/content/lib/yui/build/yahoo/yahoo.js?_yuiversion=2.4.1"></script>
<script type="text/javascript" src="/content/lib/yui/build/event/event.js?_yuiversion=2.4.1"></script>
<script type="text/javascript" src="/content/lib/yui/build/treeview/treeview.js?_yuiversion=2.4.1"></script>
<style type="text/css">
* {
margin:0; padding:0;
}
body{
margin:0 auto; padding:0;
background-color:#666;
color:#666;
font:81%/1.5 verdana,sans-serif;
text-align:center;
}
#wrap {
width:500px;
margin:0 auto; padding:0;
background-color:#fff;
text-align:center;
}
#content {
margin:0 20px; padding:0;
text-align:left;
}
#footer {
margin:1em 0 0 0; padding:.2em .5em;
background-color:#999;
color:#fff;
font-size:78%;
text-align:right;
}
#footer * {
font-style:normal;
font-size:100%;
color:#fff;
}
h1 {
margin:0 0 1em 0; padding:.5em 1em;
background-color:#999;
color:#fff;
font-size:100%;
text-align:left;
}
h1 a {
color:#fff;
}
p {
margin:1em 0; padding:0;
}
img {
border:0;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Installationsbeispiel</h1>
<p>Referenz:<a href="http://developer.yahoo.com/yui/examples/treeview/folder_style.html">YUI Library » Tree View Control » Folder-Style TreeView Design</a></p>
<div id="content">
<p>
<a id="expand" href="#">Expand all</a> |
<a id="collapse" href="#">Collapse all</a>
</p>
<div id="treeDiv1"></div>
<script type="text/javascript">
//an anonymous function wraps our code to keep our variables
//in function scope rather than in the global namespace:
(function() {
var tree; //will hold our TreeView instance
function treeInit() {
YAHOO.log("Example's treeInit function firing.", "info", "example");
//Hand off ot a method that randomly generates tree nodes:
buildRandomTextNodeTree();
//handler for expanding all nodes
YAHOO.util.Event.on("expand", "click", function(e) {
YAHOO.log("Expanding all TreeView nodes.", "info", "example");
tree.expandAll();
YAHOO.util.Event.preventDefault(e);
});
//handler for collapsing all nodes
YAHOO.util.Event.on("collapse", "click", function(e) {
YAHOO.log("Collapsing all TreeView nodes.", "info", "example");
tree.collapseAll();
YAHOO.util.Event.preventDefault(e);
});
}
//This method will build a TreeView instance and populate it with
//between 3 and 7 top-level nodes
function buildRandomTextNodeTree() {
//instantiate the tree:
tree = new YAHOO.widget.TreeView("treeDiv1");
//create top-level nodes
for (var i = 0; i < Math.floor((Math.random()*4) + 3); i++) {
var tmpNode = new YAHOO.widget.TextNode("label-" + i, tree.getRoot(), false);
//we'll delegate to another function to build child nodes:
buildRandomTextBranch(tmpNode);
}
//once it's all built out, we need to render
//our TreeView instance:
tree.draw();
}
//This function adds a random number <4 of child nodes to a given
//node, stopping at a specific node depth:
function buildRandomTextBranch(node) {
if (node.depth < 6) {
YAHOO.log("buildRandomTextBranch: " + node.index);
for ( var i = 0; i < Math.floor(Math.random() * 4) ; i++ ) {
var tmpNode = new YAHOO.widget.TextNode(node.label + "-" + i, node, false);
buildRandomTextBranch(tmpNode);
}
}
}
//When the DOM is done loading, we can initialize our TreeView
//instance:
YAHOO.util.Event.onDOMReady(treeInit);
})();//anonymous function wrapper closed; () notation executes function
</script>
</div><!-- div#wrap/div#content -->
</div><!-- div#wrap -->
</body>
</html>
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . ajax( {
url: 'jquery-sample-ajax-json.php',
dataType: 'json',
data: {
year: '2011',
month: '11',
day: '25'
},
success: function( data ) {
jQuery . each( data, function( key, value ) {
jQuery( '#jquery-sample-ajax' ) . append( '<p>' + key + ': ' + value + '</p>' );
} );
jQuery( '#jquery-sample-textStatus' ) . text( 'Erfolgreich lesen' );
},
error: function( data ) {
jQuery( '#jquery-sample-textStatus' ) . text( 'Lesefehler' );
}
} );
},
function() {
jQuery( '#jquery-sample-ajax' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
{
"book1":{
"title": "Book",
"year": 2005 ,
"page": 399
},
"book2":{
"title": "ein Stück",
"year": 2006 ,
"page": 650
}
}
STS、SpringBoot、Java8,Javascript、HTML、Timeleaf
Recommended Posts