I am using Play 2.2.6 and need to get List<String> or String[] from controller to my jQuery Ajax call.
My controller looks like:
public static Result list(){
List<String> cname = new ArrayList<String>();
String[] arr= new String[]{"abc","abc2"};
return ok(index.render(arr));
}
Code for Index method:
public static Result index(){
String[] arr= new String[]{"abc","abc2"};
return ok(index.render(arr));
}
and my jQuery function looks like:
<script>
$(function() {
ajaxCall();
});
var ajaxCall = function() {
var ajaxCallBack = {
success : onSuccess,
error : onError
}
jsRoutes.controllers.Application.list().ajax(ajaxCallBack);
};
var onSuccess = function(data) {
console.log(data)
}
var onError = function(error) {
alert(error);
}
</script>
This script is in index.scala.html file and routes are:
GET / controllers.Application.index()
POST / controllers.Application.list()
GET /javascriptRoutes controllers.JavascriptRoute.javascriptRoutes
Ajax response works perfect for String type e.g. if I say
return ok("This is string");
Then I can see it in Ajax response but can't figure out why array or list throws below error:
Internal server error, for (GET) [/] ->
cannot find symbol [symbol: method ok(java.lang.String[])] [location: class controllers.Application]
Just to mention I defined this method as POST in routes.
Any suggestions?
The problem is that you are responding with a rendered index template and the exception is being thrown when trying to render that template. What you want to do is respond with the JSON data.
public static Result list(){
String[] arr= new String[]{"abc","abc2"};
return ok(Json.toJson(arr));
}
tested it locally in my browser with the following code
$.ajax({
method: "POST",
url: "/",
dataType: "script",
success : function(data) {
console.log(JSON.parse(data));
}
});
EDIT:
So you could do something like this:
List<ObjectNode> objectNodes = new ArrayList<>();
ObjectNode objectNode = Json.newObject();
objectNode.put("Latitude", "13.679389");
objectNode.put("Longitude", "-13.679389");
objectNodes.add(objectNode);
// create loop to add more nodes
return ok(Json.toJson(objectNodes));`
And in your ajax response you will now have a list of nodes with Longitude and Latitude values
Related
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));});
}
I have created a spring controller and a jsp page. In jsp page I am using jquery ajax call to hit the controller. Now, this controller returns a json response as string. Now on based of json response in success method, I want to call a next controller call which will return a ModelAndView jsp page. How can I do this. Below is my code:
JSP Jquery ajax call:
$(document).ready(function(){
$("#submitButton").click(function(e){
var formData = getFormData();
if(formData!=false){
$.ajax({
type: 'POST',
'url': 'http://localhost:8080/Test_ReportingUI/fieldMappingNext.htm',
data: {jsonData: JSON.stringify(formData)},
dataType: 'json',
success: function(response){
try{
var strResponse=jQuery.parseJSON(response);
}catch(err){}
if(response.status=='ok')
{
alert ("okokokokokokokokok");
//I am successfully reaching till here.
//But in case of this alert box I want to call a
//controller which will return ModelAndView and
//should open a corresponding ModelAndView jsp page.
//something like:
/*
$.ajax({
type: 'GET',
'url': 'http://localhost:8080/Test_ReportingUI/abcxyz.htm',
)};
*/
}
else
{
alert("ERROR!!");
}
},
timeout: 10000,
error: function(xhr, status, err){
if(response.status=='timeout')
{
alert('Request time has been out','');
}
console.log(status,err);
}
}); }
});
});
Controller class methods:
#RequestMapping (value="fieldMappingNext.htm", method=RequestMethod.POST)
#ResponseBody String addFieldMappingNext(#RequestParam String jsonData)
{
String customerID =null;
String objectID = null;
String syncFieldName = null;
String optMapping = null;
JSONObject jsonResponse = new JSONObject();
try{
JSONObject requestedJSONObject = new JSONObject(jsonData);
customerID = requestedJSONObject.getString("customerID");
objectID = requestedJSONObject.getString("objectID");
syncFieldName = requestedJSONObject.getString("syncFieldName");
optMapping = requestedJSONObject.getString("optMapping");
}catch(Exception exex){
exex.printStackTrace();
}
if(optMapping.equalsIgnoreCase("direct")){
long metadataID=rwCustomerService.getMetaDataID(customerID,objectID);
List<RWFieldDetail> list=rwCustomerService.getFieldDetailNames(metadataID);
request.setAttribute("customerID", customerID);
request.setAttribute("objectID", objectID);
request.setAttribute("optMapping", optMapping);
request.setAttribute("syncFieldName", syncFieldName);
request.setAttribute("fieldNames", list);
try {
jsonResponse.put("status", "ok");
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
return jsonResponse.toString();
}
Second Controller method that I want to call from jquery success method:
#RequestMapping (value="abcxyz.htm", method=RequestMethod.GET)
ModelAndView fieldMapping(){
ModelAndView modelAndView=new ModelAndView("FieldMappingMainScreenNext");
return modelAndView;
}
How do I do this.
Since the second handler method returns ModelAndView, you should redirect from the success callback:
...
success: function(response) {
window.location.replace(response.url);
}
...
In your Java code you can use something like:
Map<String, String> map = new HashMap<String, String>();
if(condition1){
map.put("url","url1.html");
}
if(condition2){
map.put("url","url2.html");
}
Convert it to a JSON string and revert it back. Afterwards, in the jquery portion you'll get the response:
success:function(jsonStr){
var obj = JSON.parse(jsonStr);
var url = obj.url;
}
That is how you can get the url. If you want to load an other page or create an ajax call then you can do it.
I try to send array of integers from ajax to jersey web service.
javascript
var myFoods = [];
// adding items via push
$.ajax({
url: "ws/food/" + idParam + "/recomendation",
type: "POST",
data: {'foods[]': myFoods,
async: false,
});
web service
#POST
#Path("/{id}/recomendation")
public void updateRecomendations(
#PathParam("id")
Long id,
#FormParam("foods[]")
List<Long> recomendedFoodIds
) {
...
}
With non empty arrays this code work good but if myFoods is empty i have error
"HTTP Status 500 - java.lang.IllegalStateException: The #FormParam is utilized when the content type of the request entity is not application/x-www-form-urlencoded"
How to fix it?
I solved the problem with this:
#POST
#Path("/{id}/recomendation")
public void updateRecomendations(
Form form,
#PathParam("id")
Long id
) {
List<Long> foods = getFoodIdsFromForm(form);
...
}
private List<Long> getFoodIdsFromForm(Form form) {
Map parametrsMap = form.asMap();
final List<Long> foodIds = new ArrayList<Long>();
if (parametrsMap.get("foods[]") != null) {
List<String> idsString = (List<String>)parametrsMap.get("foods[]");
for (String id : idsString) {
foodIds.add(Long.parseLong(id));
}
}
return foodIds;
}
I am trying to make an AJAX call from ExtJS to a Spring 3.1.3 backend, using PUT and with a Map as a request parameter. I can successfully make a similar call using a List param and passing a JavaScript array of strings, but cannot get a Map to work using a JavaScript object.
In other words, this works:
#RequestMapping(value="stringTest", method=RequestMethod.PUT)
public #ResponseBody String stringTest(#RequestBody List<String> list) {
//do stuff
return "OK";
}
Ext.Ajax.request({
url: "stringTest",
method: 'PUT',
jsonData: ['one','two'],
success: function() { console.log('ok'); },
failure: function(){ console.log('fail'); }
});
However, this does not work:
#RequestMapping(value="mapTest", method=RequestMethod.PUT)
public #ResponseBody String mapTest(#RequestBody Map<String,String> map) {
//do stuff
return "OK";
}
Ext.Ajax.request({
url: "mapTest",
method: 'PUT',
jsonData: {one: 'one', two: 'two'},
success: function() { console.log('ok'); },
failure: function(){ console.log('fail'); }
});
The request itself does not fail (no 400 error), but the map itself is empty when the mapTest method is instantiated.
One curious point I have discovered is that I am able to make this work using both jsonData and params (but not one or the other) as part of the Ext.Ajax.request, like this:
var data = {one: 'one', two: 'two'};
Ext.Ajax.request({
url: "mapTest",
method: 'PUT',
jsonData: data,
params: data,
success: function() { console.log('ok'); },
failure: function(){ console.log('fail'); }
});
However, I can't use this approach because I cannot have the extra parameters passed as part of the URL string, which is what this ends up doing.
So, the question is, how can I use a Map as my request param, using just jsonData for the request body?
script Array of int and I wish to pass into Spring Controller. but I keep getting
400 bad request.
if my js array is
array = [1,2,3,4]
array -> 400 bad request
JSON.Stringify(array) -> I will get [1,2,3,4]
$.ajax({//jquery ajax
data:{"images": array},
dataType:'json',
type:"post",
url:"hellomotto"
....
})
when I loop the string List.. the first element will be '[1'
#RequestMapping(value = "/hellomotto", method = Request.POST)
public void hellomotto(#RequestParam("images") List<String> images){
sysout(images); -> I will get [1,2,3,4]
}
public void
May I know how can I do this properly? I have tried different combination
The following is a working example:
Javascript:
$('#btn_confirm').click(function (e) {
e.preventDefault(); // do not submit the form
// prepare the array
var data = table.rows('.selected').data();
var ids = [];
for(var i = 0; i < data.length; i++) {
ids.push(Number(data[i][0]));
}
$.ajax({
type: "POST",
url: "?confirm",
data: JSON.stringify(ids),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
alert(data);
},
failure: function(errMsg) {
alert(errMsg);
}
});
});
Controller:
#RequestMapping(params = "confirm", method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE)
public #ResponseBody int confirm(#RequestBody Long[] ids) {
// code to handle request
return ids.length;
}
#RequestParam is used to bind request parameters, so if you do something like
#RequestMapping(value = "/hellomotto", method = Request.POST)
public void hellomotto(#RequestParam("image") String image){
...
}
and you do post to /hellomotto?image=test, the image variable in hellomotto method will contain "test"
What you want to do is to parse Request body , so you should you should use #RequestBody annotation :
http://docs.spring.io/spring/docs/3.0.x/reference/mvc.html#mvc-ann-requestbody
it is using jackson labrary (so you will have to include it as your dependency) to parse json object into java object.
I think you wantAjax call,through ajax, you are sending List of Integers
so in spring your controller will be
#RequestMapping(value = "/hellomotto", method = Request.POST)
#ResponseBody
public void hellomotto(#RequestParam("images") List<Integer> images){
sysout(images); -> I will get [1,2,3,4]
}
*#ResponseBody is missing in Your Code