I have Spring 4 MVC web app, I would like to do a GET call with Ajax that returns a list of simple object. Suppose that the object is something like this:
class Categories {
String name;
}
and calls is like this:
function getCategories() {
$.ajax({
type: "GET",
url: "categoryFilter.html",
dataType: "json",
success: function (result) {
alert(result);
},
error: function (result) {
alert("error");
}
});
}
Than I would like to display this object inside a Spring form like this:
<form:form method="post" action="searchShop.html" modelAttribute="Categories">
<c:forEach var="cat" items="${result}">
<span><form:input path="nome" value="${cat.name}" /></span>
</c:forEach>
</form:form>
I googling around and I see that I can append the result into a div or something similar but I can do something like that?
Thanks for your reply. My controller is:
#RequestMapping("/categoryFilter")
public Response showCategory() {
List<Categoria> categoryList = categoryService.getAllCategories();
Response response = new Response("Done", categoryList);
return response;
}
and the Object response:
public class Response {
private String status;
private Object data;
....
}
I have tried many different ways, with #GetMapping and so on.. but I always received 404 bad request.
Thanks a lot
Yes yes my question was how convert the pojo automatically with jackson library but after Spring 3 I needs a lot of bean configuration and than I modify my controller as follows:
#ResponseBody
#RequestMapping("/categoryFilter")
public String showCategory() {
List<Categoria> catList = categoryService.getAllCategories();
JSONArray json = new JSONArray(catList);
return json.toString();
}
Your code:
var resObjs= JSON.stringify(result);
var cats= JSON.parse(resObjs);
$("#category-form").append('<form:form method="post" action="searchShop.html" modelAttribute="Categoria">');
$.each(JSON.parse(cats), function(i, obj) {
$("#category-form").append('<form:input path="nome" value="'+obj.nome+'" />' + obj.nome); // this line
});
$("#category-form").append('<input type="submit" value="Submit"/>');
$("#category-form").append('</form:form>');
Please take a look to the line inside the $.each, that line visualiza an input type with value the string +obj.name+ follows by the effective value of variable (the name of category).. why I can't put dinamically value right there?? I'm going mad..
Thank you
yes you can append the json values to a div, this is what i did for populating selection dropdown with json data, something similar can be done for forms as well.
success: function (responseJson) {
var responseObjects= JSON.stringify(responseJson);
var categories= JSON.parse(responseObjects);
$('#divid').empty();
$('#divid').append($('<option value="0">').text("Select Variant"));
$.each(categories, function(i, obj) { $("#divid").append(('<option>
</option>').val(obj.id).html(obj.value));});
}
Related
I'm trying to make a form that will post a CardRequestResource:
public class CardRequestResource extends ResourceSupport{
private Long cardRequestId;
private String deliveryMethod;
private String address;
private boolean isHomeDelivery;
private String requestDate;
private String expectedDate;
private String comments;
private Long statusId;
private PersonResource person;
//Getters and Setters
}
In my controller, I first load the JSP and add an empty CardRequestResource to the ModelMap:
#RequestMapping(value = { "", "/approval" }, method = RequestMethod.GET)
public String getApproval(ModelMap map) {
map.put("cardRequestResource", new CardRequestResource());
return "cardoffice/approval";
}
My JSP builds the form with the cardRequestResource model attribute:
<form:form id="detailForm" name="detailForm" modelAttribute="cardRequestResource">
<form:input path="statusId" type="hidden" id="statusId" name="statusId" />
<form:textarea path="comments" name="comments" id="commentTextarea" rows="7" cols="81" style="font-style: normal;"/>
</form:form>
A Javascript function makes an AJAX call to populate the form values:
function getCardRequestDetails(cardRequestUrl) {
$.ajax({
type : "GET",
url : cardRequestUrl,
dataType : "json",
success : function(response) {
loadCardRequestDetails(response);
},
error : function(response) {}
});
};
function loadCardRequestDetails(cardRequest) {
$("#statusId").attr("value", cardRequest.statusId);
$("#commentTextarea").val(cardRequest.comments);
}
At this point a user may update the comment text area, and the hidden input may change conditionally on what the user enters in the field. Then when the form is submitted, I call the following Javascript function:
function postCardRequest(url) {
var serialized = $("#detailForm").serialize();
alert(serialized);
$.ajax({
type: "POST",
url: url,
data: serialized,
contentType: "application/json",
dataType: "json"
});
}
The alert shows that the fields are populated correctly with the data that was either originally loaded by AJAX/Javascript, or by the user. However when I get to the handler in my controller that processes the post, the CardRequestResource is non-null, but EVERY SINGLE field in it is NULL!
Handler code:
#RequestMapping(value = "/approval/submit", method = RequestMethod.POST)
public #ResponseBody Map<String, Object> postCardRequest(#ModelAttribute(value = "cardRequestResource") CardRequestResource cardRequestResource) {
Map<String, Object> responseMap = new HashMap<String, Object>();
final String success = "success";
Boolean isSuccessful = Boolean.FALSE;
if(cardRequestResource != null){
isSuccessful = Boolean.TRUE;
}
//TODO
System.out.println("Status: " + cardRequestResource.getStatusId() + ", Comments: " + cardRequestResource.getComments());
responseMap.put(success, isSuccessful);
return responseMap;
}
So I think I found the perp!
This lil' guy right here in the POST AJAX call:
contentType: "application/json",
I was originally sending JSON to my controller, then I learned that Spring MVC had that nifty ModelAttribute annotation, so I wouldn't have to worry about converting to/from JSON during my POST. Unfortunately, I didn't think to remove that contentType line, and one would think that it would throw an error or something with it still in there... apparently not. Just NULL values in the binding and hours of fruitless debugging...
After I removed that line, I started getting data in the CardRequest attributes instead of NULLs!
Try to put the following code in the aplication-context.xml. This could be the solution if you are having your form encType='multipart/form-data'.
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10000000"/>
</bean>
I have a simple JSP file with some radios, one text input and one button.
In the button onClick I am doing an Ajax request to a Spring controller as you can see bellow:
function callFiltrarViaAJAX() {
var filtro = $("#filtro").val();
var optFiltro = $('input[name=optFiltro]:checked').val();
$.ajax({
type : "GET",
url : "filtrar",
//dataType : "json",
data : {
filtro : filtro,
optFiltro : optFiltro
},
success: function(data) {
console.log("SUCCESS: ", data);
},
error: function(e) {
console.log("ERROR: ", e);
},
done: function(e) {
console.log("DONE");
}
});
}
In the Spring controller I am receiving this request with success with the following code:
#Controller
public class FiltroController {
#RequestMapping(value = "/filtrar", method = RequestMethod.GET)
public #ResponseBody String filtrarVacina(FiltroTO filtro, HttpServletResponse response, ModelAndView model) {
VacinaTO v = new VacinaTO();
v.setId(new Long(10));
v.setLote("Lote 1");
v.setNome("BCG");
model.addObject("vacina", v);
response.setStatus(200);
return "TEST OK";
}
}
As you can see in the code above, I'm adding a POJO object in the ModelAndView that I'am trying to use in the JSP to show the return of the Ajax request in a table.
My Ajax request returns with success too but the problem is that even returning with success I can't use the POJO object, when I try to access the object by expression language I got nothing.
I've been searching about this situation and I found a lot of contents but none of the solutions that I've found works for me, but I found an interesting answer:
JSP inside ListItems onclick
So, is it means that I can't get a new parameter in the same JSP file with a Ajax request ? If yes, would be a JSON file the better way to get the return from the Spring controller ?
You can't access the model because you're returning an arbitrary string from controller instead of the view in which you want to access model.
If you're trying to access vacine from some.jsp, then you should return some from the controller method.
Of course, what I said is valid if you have proper ViewResolver configuration.
How many ways are to pass JSON data to a spring controller?
I followed this tutorial and they pass the data using the following syntax:
data: "{\"name\":\"hmkcode\",\"id\":2}",
This works but since I need to retrieve the data from a user using a text input I don't know how to put my variable in that string.
I tried doing using the following syntax:
data: "{\"name\":\name\}"
But it returns the following error:
status: parsererror er:SyntaxError: Unexpected tokken a
I have seen other sites that uses the following syntax:
data: {"name":name}
But that gives me the same error.
This works but I don't know if is the best approach.
var json = {"name" : name};
...
data: JSON.stringify(json),
I manage to pass the JSON string to one of my controllers but I get the string like this:
{"name": Joe, "lastname": Smith}
Is there a way to only get that info in a Person Object or at least get only Joe in a string and Smith in another one?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
function doAjaxPost()
{
// get the form values
var name = $('#name').val();
var lastname = $('#lastname').val();
var json = {"name" : name, "lastname" : lastname};
//console.log(json);
$.ajax(
{
type: "POST",
url: "formShow",
data: JSON.stringify(json),
//data: "{\"name\":name}",
//data: {"name":name},
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
beforeSend: function(xhr)
{
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
},
success: function(data)
{
//console.log(data);
console.log(data.name);
//var data = $.parseJSON(JSON.stringify(response));
//alert(data);
alert( "name: "+data.name);
//$('#name').val('');
},
error:function(data,status,er) {
alert("error: "+data+" status: "+status+" er:"+er);
}
/* error: function (xhr, ajaxOptions, thrownError)
{
alert(xhr.status);
alert(xhr.responseText);
alert(thrownError);
}*/
});
}
</script>
<fieldset>
<legend>Name in view</legend>
Name in view: <input type="text" id="name" name="name">
<br>
Last Name in view: <input type="text" id="lastname" name="lastname">
<br>
Show modify name in view: <input type="text" id="modifyname" name=""modifyname"">
<br>
<input type="button" value="Add Users" onclick="doAjaxPost()">
</fieldset>
<br>
And these are my controllers:
#RequestMapping(value = "formShow", method = RequestMethod.GET)
public String formularioIncidencia (Model model) {
return "formShow";
}
#RequestMapping(value = "formShow", method = RequestMethod.POST)
public #ResponseBody String getTags(#RequestBody String name)
{
String variableAjax= name;
System.out.println("controller variable is " + variableAjax);
//that prints me this "{name: Joe, lastname: Smith}"
return variableAjax;
}
EDITED****
this is my User class
public class Userimplements Serializable {
private static final long serialVersionUID = 1L;
private String name;
private String lastname;
public User(){}
}
I edited my controllers to the following
#RequestMapping(value = "formShow", method = RequestMethod.GET)
public String formShow(Model model) {
return "formShow";
}
#RequestMapping(value = "formShow", method = RequestMethod.POST)
public #ResponseBody User getTags(#RequestBody final User user, Model model)
{
//what should i do here parse my user to JSON how??
user.setName("name changed");
model.("modifyname", user.getName() );
return User;
}
From Ajax you can also pass data as data:'name='+ name+'&lastname='+ lastname,
And at controller end you can make use of #RequestParam annotation to get this value passed from ajax call.
Ajax code looks as follows:
$.ajax({
type: 'POST',
url:'your controller url',
data:'name='+ name+'&lastname='+ lastname,
success: function(msg){
alert('wow' + msg);
}
});
Controller code:
#RequestMapping(value = "formShow", method = RequestMethod.POST)
public String getTags(#RequestParam("name") String name, RequestParam("lastname") String lastname)
{
System.out.println("name: " + name+ " lastname: "+lastname);
String fullName = name + lastname;
return fullName;
}
Hope this helped you.
Cheers:)
For sending the input data to controller, you don't have to necessarily use json as a format. You can simply pass them as request param and extract it on controller using #RequestParam annotation. If you want to post json data you can use JSON.stringify(json). if you to bind object to your model object, try using #Modelattribute on controller and pass the data in your ajax post. There are plenty of examples for this.
Use #RequestParam or #RequestBody to get your data on your controller based on what approach you choose based on point 1.
Use #ResponseBody to send the data back and if you send json data back, use Json.parseJson to convert to js object or if you send a Map, you would get a JS object back in your ajax handler. You can use Dot notation to populate the data.
A few observations will be enlighten ( i hope ).
In JAVA: it is always better to specify your "request" object and your response object like this:
#RequestMapping(method = RequestMethod.POST, value = "/rest/path/to/action",
consumes = "application/json", produces = "application/json")
#ResponseStatus(value = HttpStatus.OK)
public #ResponseBody
List<?> action(#RequestBody List<?> requestParam) {
List<String> myret = new ArrayList<String>();
for (int i=0; i < requestParam.size() ;i++){
myret.add(requestParam.get(i).toString());
}
}
In this case i defined the same object "List" as my request and my response object, but that it's up to your definitions. If you want to represent a user object, you must define your user object and specify the fields u want with Jackson lib. It is a little tricky, but once you got it, you can pass any object you want.
And then you can just pass your data in AJAX as defined in your controller. So in this case would be:
var postData = ["Somedata", "Someotherdata"];
$.ajax(
{
type: "POST",
url: "/rest/path/to/action",
data: postData, // i can do this, because it is defined this way in my controller
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
//etc etc
I hope it helps :)
Cheers
I am working with Spring Security and trying to display role of the user that is loged in.
Spring Sec is functioning - I have working register and login JS functions(I can see new user in database, and I can do a valid login) but when I try to get role info for the current user and display it via simple {{role}} in simple html file in frontend i get this error:
But I still get a valid response from JSON:
This is my user.html where data-ng-init and {{role}} are:
<div class="masthead">
<h4 class="text-center" data-ng-init="init()">
<strong>Users Home Screen</strong>
</h4>
<p>{{role}}</p>
<br>
...
</div>
This is my userController.js (it's connected to user.html via app.js):
collectionsApp.controller('userController', function($scope, userService,
$state) {
$scope.init = function() {
userService.getAuthorization(displayRole);
}
displayRole = function(response) {
$scope.role = response.data;
}
});
My userService.js:
collectionsApp.service('userService', function($http) {
return {
login : function(user, callback) {
$http.post('/user/login', user).then(callback);
},
register : function(user, callback) {
$http.post('/user/add', user).then(callback);
},
getAuthorization : function(callback) {
$http.get('/user/getAuthorization').then(callback);
}
};
});
My UserController.java (only function of interest is displayed in this post):
#RequestMapping(value = "/getAuthorization", method = RequestMethod.GET)
public String getAuthorization() {
return SecurityContextHolder.getContext().getAuthentication().getAuthorities().toString();
}
Oh, and one more strange thing:
When I put break-point, like shown on image below, and hit f5 on user.html, debugging acts like it never reaches the break point and reports mentioned SyntaxError in console. That is rather paranormal if you ask me... :)
Your response is not valid JSON. ["SOME_ROLE"] would be generated if you convert to JSON an array containing the single String element "SOME_ROLE". If you are using Google's Gson library, you can do:
Gson gson = new Gson();
gson.toJson(new String[]{SecurityContextHolder.getContext().getAuthentication().getAuthorities().toString()});
I am having a question that how can I send JSON Object from Springs MVC so that I can convert it into a JavaScript Object on my HTML Page.
In a traditional way I do it: Below is a snippet from Java Servlet which sets a request attribute and forward it to the JSP Page.
JSONObject jsonObj = new JSONObject();
jsonObj.put("name","test");
jsonObj.put("age",24);
request.setAttribute("jsonObj",jsonObj);
request.getRequestDispatcher("test.jsp").forward(request,response);
In JSP I retrieve as :
<script type="text/javascript">
var jsonObj =<%=request.getAttribute("jsonObj"); %>;
alert("name = "+jsonObj.name+" ; age = "+jsonObj.age); // This will output name and age from the JSON Object
</script>
So what I need to ask how can I do the same in Springs MVC. How can I send the JSONObject from Dispatcher Servlet, and convert it to JS object in my JSP page ?
An easy way to do this using the ObjectMapper. It will create an JSON String from your Object. And that you can send to your view/jsp.
I put an small example of a controller I do this (just snipped).
#Controller
public class UsersSettingsController {
#Autowired
UserSettingsDefaultService userSettingsService;
#RequestMapping(value="/userSettings/dynamic/userSettings", method=RequestMethod.GET)
public ModelAndView get() throws Exception {
ModelAndView mav = new ModelAndView();
ObjectMapper mapper = new ObjectMapper();
User user = (User)SecurityContextHolder.getContext().getAuthentication().getPrincipal();
UserSettings userSet = userSettingsService.getUserSettingsByUser(user);
mav.addObject("userSettingsJSON", mapper.writeValueAsString(userSet));
mav.setViewName("userSettings/dynamic/filter");
return mav;
}
}
Or course can you create your JSON Object in your Contoller step by step like you did in your example. Then you don't need the Mapper, just sending the String to your View.
In the JSP you load the json String like this into a JS var:
var jsonString = '${userSettingsJSON}';
To get elements from JSON String or parse, see: http://www.json.org/js.html.
I'm an KnockOut Framework Fan would do it with it.
I think you should use ajax(for example jquery),the following is spring mvc
#RequestMapping(value = "/admin/new/list", method = RequestMethod.GET)
#ResponseBody
public List<News> list()
{
return newsDao.findAll();
}
and in the jsp page,you may use ajax util (for example jquery)
$.ajax({
type: "GET",
url: '<c:url value="/admin/new/list"/>',
cache:false,
dataType :'json',
success: function(data){
alert(data);
}
});
the data is json object
I don't know whether the above is what you need
A much easier way to do this is to include the Jackson dependencies in maven and use #ResponseBody to return a JSON representation of the object, without having to manually write the manipulation.
Have a look at the example below, you shouldn't have to write any tranlation to JSON code.
http://www.mkyong.com/spring-mvc/spring-3-mvc-and-json-example/
As per your requirement, I suggest you to use AJAX call with JSON as data type.
For example :
$.ajax({
url: "getFormatIdDescMap?compId="+compId,
global: false,
type: "POST",
dataType:"json",
contanttype:'text/json',
async:false,
error:function(){
alert("Error during retrieving the foramt ID List");
},
success: function(data){
//REMOVE ALL THE OLD VALUES OF FORMAT DROP DOWN
removeDropDownVals('formatList');
var optn;
for(var index=0;index<data.formatKeys.length;index++){
optn = document.createElement("option");
document.getElementById("formatList").options.add(optn);
optn.text =data.formatDescs[index];
optn.value=data.formatKeys[index];
}
}
});
});
In the code above, I am preparing a new list of Formats based on company ID. You can iterate over the response.
It will give response text as per your requirements. But here note that .. if you are getting json Array in the response, it will contain that data in square bracket like..[1,2,3] and If you are getting response in JSON Object then it will be displayed in curly braces like {"data",[1,2,3]}.