如何在Spring MVC中的控制器中操作jQuery AJAX JSON数据

Question

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;
}

Answer 1

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:)

Answer 2

1. 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.
2. Use @RequestParam or @RequestBody to get your data on your controller based on what approach you choose based on point 1.
3. 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.

Answer 3

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