Spring controller does not load view - spring

Question

I calling a controller via button click using ajax. I want it to load hello.html page but I want spring to do it not ajax.
What happens after I click the button is nothing but I'm sure the controller is being hit.
Here is the controller I'm calling via button click using ajax.
#RequestMapping(value="/submitName", method=RequestMethod.GET)
public String submitName(#RequestParam String name, Model model) {
System.out.println(name);
model.addAttribute("name", name);
return "hello";
}
Here is the ajax call.
$('#submit-button').on('click', function() {
$.ajax({
type: 'GET',
url: '/submitName',
data: {name: $('#name').val()}
});
});
Funny thing is in the chrome network tab it shows the page that I'm expecting. Here is a snippet.

Answer 1

I think everything is ok here, except you didn't mention how you want to show your page or where. You have to declare a container where your html returned from controller would appear, like under a div id or something like that.
So, just in your current html page, declare a new tag, may be <div id="current-page-id"></div>
Now, append the hello.html page to your current page using jquery:
$("#current-page-id").html(responseData);
So, basically, do this:
$.ajax({
type: 'GET',
url: '/submitName',
data: {name: $('#name').val()},
dataType: 'html',
success: function (responseData) {
$('#current-page-id').html(responseData);
},
});
Or, simply, load the page as separate html page, not via ajax.
Update:
instead of using ajax-as you asked for in comment section, do this as follows:
function getHtmlPage(String name)
{
location.href = 'submitName/' + name;
}
Now call your method on button click:
$('#submit-button').on('click', function() {
var name=$('#name').val();
getHtmlPage(name);
});

Answer 2

AJAX Calling just send the request to the server (controller) and received a response,
By default, It's dos not responsibility for reloading the page.
In this why when you click the button it hit the server-side but stay on the same page.
Simple there is two way you can load your new page ( hello.html )
1| With AJAX calling:
On the button click method, you have to explicitly load the page (Best practice in Ajax Success block)
adding this window load metbod:
window.location.href = "http://localhost:8080/hello.html";
Like:
$('#submit-button').on('click', function() {
$.ajax({
type: 'GET',
url: '/submitName',
data: {name: $('#name').val()}
window.location.href = "http://localhost:8080/hello.html";
});
});
2| Direct Http Call on the Button
HTML
<a class="btn btn-primary btn-lg pull-right" href="http://localhost:8080/hello" role="button">Hello Page</a>
JSP:
<a class="btn btn-primary btn-lg pull-right" href="${pageContext.request.contextPath}/hello" role="button">Hello page</a>
Thymeleaf
<a class="btn btn-xs" th:href="#{/hello})}">Hello Page </a>