new to angularjs. I am sure i am missing something.
I am unable to render the response send by server on jsp page if i hit server with angularjs's $http directive.
angularcode
// Read button Handler
$scope.readAll=function(){
readTable($scope.clnfamilyArray);
//send data to server
testAddItem=function(){
$http({
'url' : 'http://localhost:9090/QuantumM/orbital/sendstatement/',
'method' : 'POST',
'headers': {'Content-Type' : 'application/json'},
'data' : $scope.clnfamilyArray
}).success(function(data){
console.log(data);
})
}//end of function
testAddItem();
}////end of readAll
spring code
#RequestMapping(value = "/sendstatement/", method = RequestMethod.POST)
public ModelAndView welcome(#RequestBody String map) {
ModelAndView model = new ModelAndView();
// BL
model.addObject("name",hTable.toHtml());
model.setViewName("test");
return model;
}
test.jsp
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<h1>Gradle - Spring MVC Hello World</h1>
<h2>Hello ${name}</h2>
</body>
</html>
Instead of rendering test.jsp. I am landing on the same page. But on console I can see the expected output..
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<h1>Gradle - Spring MVC Hello World</h1>
<h2>Hello <table border=1><tr><td colspan=2>s</td></tr><tr><td colspan=1>f</td><td colspan=1>d</td></tr></table></h2>
</body>
</html>
Is there anything which I am missing ???
I wanted to landed on test.jsp not on my current calling page...
You are missing something, as you guessed. The purpose of the $http call is to fetch the results of an HTTP call and provide it to your AngularJS application's model. It is not meant to redirect you to a new page on another server.
The reason you see the page output in the console is due to the .success() portion of the http call:
$http({
'url' : 'http://localhost:9090/QuantumM/orbital/sendstatement/',
'method' : 'POST',
'headers': {'Content-Type' : 'application/json'},
'data' : $scope.clnfamilyArray
}).success(function(data){ // The data is passed here when received
console.log(data);
})
It's an async call handled by a promise. So your app makes the http call, and then goes on its merry way. When the data from that http call is available, it is passed to your .success() call and then you log it to the console. Here's a Plunk demo I did showing how promises work in serial and parallel so you can see some of their benefit.
This is not the Angular way. What you should be doing for a single-page-app in AngularJS is fetch the DATA from the server, not a rendered page, and then display it to the user with AngularJS views.
Instead of having your SpringMVC app render the view, have it pass the model back as JSON data. That way, you will be able to easily show it to the user in your AngularJS view.
My guess is that if you took your example and had it return JSON, it would return something like:
{
"name": "Bob"
}
Then you would change the .success() call to do something like this:
.success(function(data) {
$scope.name = data.name;
})
And in your view, you would show it with:
<p>Hi {{name}}</p>
Hope this helps.
Related
This is my controller:
#GetMapping("/getRandomWildSwimming")
public List<WildSwimming> getRandomWildSwimming() {
return wildSwimmingService.getRandomWildSwimming();
}
How I can access it with HTML? I'm confused, I saw some tutorials where I set return index.html for example, but I'm returning here actually service that show me collection data from Mongo in JSON when I send request for example: http://localhost:8080/wildswimming/getRandomWildSwimming page show me one collection from mongo in JSON format, how I can show that via html and stylize it a bit?
If you want to use this approach, you need a client. For example, you can use JS or PHP for it.
Then you need to create HTML pages, add scripts (using JS or PHP) to send requests, get responses and show it to user.
This looks like: user opens page -> client sends request to your spring controller -> spring controller returns response -> client gets and shows it to user.
OR
You can use Spring MVC if you do not how to launch client server.
You will need to add a dependency to your project so that spring boot knows how to convert an object into json. If you're using maven, add com.fasterxml.jackson.core:jackson-databind to your pom file.
Then, add the #ResponseBody annotation to the getRandomWildSwimming method so that it ends up looking like this...
#GetMapping("/getRandomWildSwimming")
public #ResponseBody List<WildSwimming> getRandomWildSwimming() {
return wildSwimmingService.getRandomWildSwimming();
}
This will make the controller respond with json when it is called in a web browser.
Assuming that it returns JSON that looks like this...
[{"rating":89},{"rating":24},{"rating":68}]
You can using the $.get function (from the jquery library), to make a call to the /getRandomWildSwimming api method, which will fetch the JSON and automatically convert it into a javascript array of objects...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="resources/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Wild Swimming Records</h1>
<ul id="canvas">
</ul>
<script type="text/javascript">
$(document).ready(function(){
$.get("./getRandomWildSwimming", function(data) {
console.log(data[0].rating);
console.log("JSON: " + JSON.stringify(data));
$.each(data, function(index, value) {
$("#canvas").append("<li>" + value.rating + "</li>");
});
});
});
</script>
</body>
</html>
This should result in a page that looks something like this...
Wild Swimming Records
- 89
- 24
- 68
The first console.log line will take the rating property of the first object in the data array and print it to the browser console. The second console.log line will convert the entire array back into a json string and print it to the browser console.
How to pass bean values from parent jsp to child jsp in struts2?
My current application is built on Struts 1.2.
In this, when the form is submitted, entire jsp is submitted. And another (or same) jsp is loaded with the bean values.
I am trying to implement a single page application in my current application. Instead of loading/submitting entire page, I'm calling the jsp through ajax. It returns the html of the required jsp and the html is appended in the main jsp.
So there is only 1 main jsp which is redirected through struts action.
I'm calling the bean values in the main jsp.
My requirement is that when the user clicks any control input, How can I pass the bean values(data) to the new jsp which is loaded in the main jsp through ajax.
How can I pass the bean values(data) to the new jsp?
I'm novice to struts2. Any help is appreciated. Thanks.
Edited:
Please find the code which appends the html through ajax:
The div in which the html is appended:
JSP:
<div class="dynamic-loaded-content">
</div>
and HTML name which is loaded on ajax: index-calender.html
This name is passed in the following method:
JS:
function dynamic_file_linker(path) { /* loader display */
$('.loading-bg').show();
$('.loading-img').show().offset({
top: $(window).height() / 2,
left: $(window).width() / 2
});
$('.tool-tip').hide();
$.ajax({
url: path,
type: 'GET',
dataType: "text",
success: function(result) {
$('.dynamic-loaded-content').empty().append(result);
$('.loading-bg').fadeOut();
page_align();
},
error: function() {
alert('Sorry! The page cannot be loaded.');
}
})
}
You can pass form data over AJAX using the FormData object:
var formData = new FormData(form);
xmlHTTP.send(formData);
Where xmlHTTP is your ajax request object and form is your form. This will pass all the data from the form to the action you are calling.
See here for details of this technique:
https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects
Ajax function
$.ajax({
url: path?form_data1='+ $("#data1").val()+'&form_data2='+$("#data2").val()+',
type: 'GET',
success: function(result) {
//your stuff
},
error: function() {
alert('Sorry! The page cannot be loaded.');
}
});
struts.xml
<action name="path" class="controller.UrlActionClass">
<result name="success">result.jsp</result>
</action>
UrlActionClass.class
private String form_data1;
private String form_data2;
//getter and setter method
ajax success page...
placed the result.jsp page to your div tag.
actually I am developing a application using Spring MVC, in one case I have to make the user to wait for the results by displaying a page..and once the back end processes the request..the results will be loaded. Can anyone please tell me how can I achieve that?
I'd say this is more of a javascript solution than necessarily a Spring one.
Lets say you're waiting on a request from the back end process, you could use the solution here to wait for a response while your back end produces the data you require.
The code below would show the code within the loaderImage id (say it's a div in html), then hide it when the success is loaded. The ajax request would just be whatever POST or GET you use to get to your back end controller.
$('#loaderImage').show();
$.ajax({
// Other ajax parameters
success: function () {
// hiding the image here
$('#loaderImage').hide();
}
});
You can use
window.onload();
<!doctype html>
<html>
<head>
<title>onload test</title>
<script>
function load() {
alert("load event detected!");
}
window.onload = load;
</script>
</head>
<body>
<p>The load event fires when the document has finished loading!</p>
</body>
</html>
SO there you can remove your loading div or html.
https://developer.mozilla.org/en-US/docs/DOM/window.onload
I'm trying to make an Ajax call to my Spring MVC app using a Jquery Ajax. The app controllers are working fine but I can't get this Ajax test controller to work. The alert is triggered but the call to the controller is never made. I've also tried using load, get, post. None of them call the server. Which makes me think I'm doing something obviously wrong. If I put the URL directly on the browser address bar, the controller is called.
If someone can guide me in the right direction or tell me what I'm doing wrong, I'd be grateful.
JavaScript
<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.min.js"> </script>
<script type="text/javascript">
function doAjax() {
alert("did it even get here?");
$.ajax({
url : "simpleRequestTest.do",
method: "GET",
success : function(response) {
$('#show').html(response);
}
});
}
</script>
</head>
<body>
<h1>Simple Test </h1>
Simple Test
<br />
<div id="show">...</div>
</body>
</html>
Controller
#RequestMapping("/simpleRequestTest")
public #ResponseBody String performSimple() {
return "Very Simple Test";
}
Can you check whether you use correct path for include the jquery-1.8.1.min.js.
I checked the code it's working file for me.
I think you are missing dataType in ajax call
try this
function doAjax() {
alert("did it even get here?");
$.ajax({
url : "simpleRequestTest.do",
method: "GET",
success : function(response) {
$('#show').html(response);
},
dataType: 'text'
});
}
Just change url : "simpleRequestTest.do", to url : "simpleRequestTest", and method: "GET", to type: "GET",
I think the method is removed in the jquery version 1.5 and latest
I have a simple Java application, which reacts to web service request.
When the user presses a button, a message is sent to the Java application.
If the message is "ping", then the application responds with "pong", otherwise - "uknown message".
Code of the Java application:
#Path("/ping-pong")
public class PingPongService {
#POST
#Produces("text/plain")
public String test(#FormParam("message") final String aMessage) {
System.out.println("message from client: " + aMessage);
if ("ping".equalsIgnoreCase(aMessage)) {
System.out.println("ping.equalsIgnoreCase(aMessage)");
return "pong";
} else {
System.out.println("Unknown message");
return "unknown message " + aMessage;
}
}
}
Inside the WAR file, I have following HTML code, which works (when I press one of the buttons, I get the response from the Java application and it is displayed in the message box):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JavaScript Ping-Pong Client</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
//This function send post request to the server using jQuery
function testWithJQuery(message){
$.post('http://localhost:8345/rest/ping-pong', { message: message }, function(data) {
alert(data);
});
}
//This function send post request to the server using a low-level XmlHttpRequest instead of the jQuery
//(no dependencies on external libraries)
function test(message){
var http = new XMLHttpRequest();
var url = "http://localhost:8345/rest/ping-pong";
var params = "message=" + message;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
};
http.send(params);
}
</script>
</head>
<body>
<button onclick="test('ping')">Test</button>
<button onclick="testWithJQuery('ping')">Test using jQuery</button>
</body>
</html>
I want to do exactly the same thing (user presses a button, a message is sent to the Java application and its response displayed in an alert message window) in a Django application.
Django generates following HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
//This function send post request to the server using jQuery
function testWithJQuery(message){
$.post('http://localhost:8345/rest/ping-pong', { message: message }, function(data) {
alert(data);
});
}
//This function send post request to the server using a low-level XmlHttpRequest instead of the jQuery
//(no dependencies on external libraries)
function test(message){
var http = new XMLHttpRequest();
var url = "http://localhost:8345/rest/ping-pong";
var params = "message=" + message;
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
};
http.send(params);
}
</script>
</head>
<body>
<button onclick="test('ping')">Test</button>
</body>
</html>
When I press the "Test" button in Django-generated code, the Java application receives the message (I see this in the console output), but the response of the Java application is not displayed in Django web site, even though the HTML code is identical to the one in the WAR file.
How can I fix this, i. e. make sure that the response of the Java application is displayed in Django?
UPD: Here's the detailed error description in the "Network" pane of Chrome:
This is not an straight answer but rather some tips to help you diagnose the problem; I'm posting here because it is too big for a comment.
open the Chrome debugger (shif+ctrl+i) or Firefox Firebug and make the Network tab active.
inspect the post made by both versions and compare headers and body
If there is distinct behavior, there should be some differences between both posts.
[update]
I found the error - see the screenshot in the question. The error is "XMLHttpRequest cannot load localhost:8345/rest/ping-pong. Origin localhost:8000 is not allowed by Access-Control-Allow-Origin.".
The error is due to security constraints in the browser (same origin policy). There are some workarrounds (source: wikipedia):
To enable developers to, in a controlled manner, circumvent the same origin policy, a number of "hacks" such as using the fragment identifier or the window.name property have been used to pass data between documents residing in different domains. With the HTML5 standard, a method was formalized for this: the postMessage interface, which is only available on recent browsers. JSONP and cross-origin resource sharing can also be used to enable ajax-like calls to other domains.2 easyXDM can also be used to easily work around the limitation set in place by the same origin policy. It is a lightweight, easy-to-use and self-contained Javascript library that makes it easy for developers to communicate and expose javascript APIs across domain boundaries.
I've used the subdomain hack with success, see this answer:
Ways to circumvent the same-origin policy