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

Question

将 JSON 数据传递给 spring 控制器有多少种方法？

我关注了this tutorial，他们使用以下语法传递数据：

data: "{\"name\":\"hmkcode\",\"id\":2}",

这可行，但由于我需要使用文本输入从用户那里检索数据，所以我不知道如何将变量放入该字符串中。

我尝试使用以下语法：

data: "{\"name\":\name\}" 

但它返回以下错误：

status: parsererror er:SyntaxError: Unexpected tokken a

我见过使用以下语法的其他网站：

data: {"name":name} 

但这给了我同样的错误。

这可行，但我不知道是否是最好的方法。

var json = {"name" : name};
...
data: JSON.stringify(json),

我设法将 JSON 字符串传递给我的一个控制器，但得到的字符串如下：

{"name": Joe, "lastname": Smith} 

有没有办法只在 Person 对象中获取该信息，或者至少只在一个字符串中获取 Joe 而在另一个字符串中获取 Smith？

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

这些是我的控制器：

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

已编辑**** 这是我的用户类

public class Userimplements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;
    private String lastname;

    public User(){}
}

我将控制器编辑为以下内容

@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

在 Ajax 中，您还可以将数据传递为 data:'name='+ name+'&lastname='+ lastname, 在控制器端，您可以使用 @RequestParam 注释来获取从 ajax 调用传递的这个值。 Ajax 代码如下：

$.ajax({
   type: 'POST',    
   url:'your controller url',
   data:'name='+ name+'&lastname='+ lastname,
   success: function(msg){
      alert('wow' + msg);
   }
});

控制器代码：

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

希望这对您有所帮助。 干杯:)

Answer 2

1. 为了将输入数据发送到控制器，您不必一定使用 json 作为格式。您可以简单地将它们作为请求参数传递并使用 @RequestParam 注释将其提取到控制器上。如果要发布 json 数据，可以使用 JSON.stringify(json)。如果要将对象绑定到模型对象，请尝试在控制器上使用 @Modelattribute 并在 ajax 帖子中传递数据。这方面的例子很多。
2. 根据您根据第 1 点选择的方法，使用 @RequestParam 或 @RequestBody 在控制器上获取数据。
3. 使用@ResponseBody 发送回数据，如果您发送回json 数据，请使用Json.parseJson 转换为js 对象，或者如果您发送一个Map，您将在您的ajax 处理程序中返回一个JS 对象。您可以使用点符号来填充数据。

Answer 3

一些观察会有所启发（我希望）。

在 JAVA 中：最好像这样指定“请求”对象和响应对象：

@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());
     }

}

在这种情况下，我定义了与我的请求和响应对象相同的对象“列表”，但这取决于您的定义。如果你想表示一个用户对象，你必须定义你的用户对象并指定你想要的杰克逊库的字段。这有点棘手，但是一旦你得到它，你就可以传递任何你想要的对象。

然后您可以按照控制器中的定义在 AJAX 中传递您的数据。所以在这种情况下是：

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

希望对你有帮助:)

干杯