* Moved Accessing Spring MVC objects model in JavaScript

This commit is contained in:
dupirefr
2020-02-09 11:11:04 +01:00
parent b977f3ae60
commit 997103b3f5
9 changed files with 3 additions and 3 deletions

View File

@@ -16,3 +16,4 @@ The "REST With Spring" Classes: http://bit.ly/restwithspring
- [Spring MVC @PathVariable with a dot (.) gets truncated](https://www.baeldung.com/spring-mvc-pathvariable-dot)
- [Working with Date Parameters in Spring](https://www.baeldung.com/spring-date-parameters)
- [A Java Web Application Without a web.xml](https://www.baeldung.com/java-web-app-without-web-xml)
- [Accessing Spring MVC Model Objects in JavaScript](https://www.baeldung.com/spring-mvc-model-objects-js)

View File

@@ -0,0 +1,12 @@
package com.baeldung.accessparamsjs;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class App {
public static void main(String[] args) {
SpringApplication.run(App.class, args);
}
}

View File

@@ -0,0 +1,32 @@
package com.baeldung.accessparamsjs;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.Map;
/**
* Sample rest controller for the tutorial article
* "Access Spring MVC Model object in JavaScript".
*
* @author Andrew Shcherbakov
*
*/
@RestController
public class Controller {
/**
* Define two model objects (one integer and one string) and pass them to the view.
*
* @param model
* @return
*/
@RequestMapping("/index")
public ModelAndView thymeleafView(Map<String, Object> model) {
model.put("number", 1234);
model.put("message", "Hello from Spring MVC");
return new ModelAndView("thymeleaf/index");
}
}

View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Access Spring MVC params</title>
<script src="/js/jquery.js"></script>
<script src="/js/script-async.js"></script>
<script src="/js/script-async-jquery.js"></script>
<script>
var number = [[${number}]];
var message = "[[${message}]]";
</script>
</head>
<body>
Number=
<span th:text="${number}" th:remove="tag"></span>
<br /> Message=
<span th:text="${message}" th:remove="tag"></span>
<h2>Data from the external JS file (due to loading order)</h2>
<div id="number-ext"></div>
<div id="message-ext"></div>
<h2>Asynchronous loading from external JS file (plain JS)</h2>
<div id="number-async"></div>
<div id="message-async"></div>
<h2>Asynchronous loading from external JS file (jQuery)</h2>
<div id="number-async-jquery"></div>
<div id="message-async-jquery"></div>
</body>
<script src="/js/script.js"></script>
</html>

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,6 @@
$(function() {
var node1 = document.createTextNode("message = " + message);
var node2 = document.createTextNode("number = " + number);
document.getElementById('message-async-jquery').append(node1);
document.getElementById('number-async-jquery').append(node2);
});

View File

@@ -0,0 +1,6 @@
window.onload = function() {
var node1 = document.createTextNode("message = " + message);
var node2 = document.createTextNode("number = " + number);
document.getElementById('message-async').append(node1);
document.getElementById('number-async').append(node2);
};

View File

@@ -0,0 +1,4 @@
var node1 = document.createTextNode("message = " + message);
var node2 = document.createTextNode("number = " + number);
document.getElementById('message-ext').append(node1);
document.getElementById('number-ext').append(node2);