javascript - 使用 Ajax 发送表单 - Spring MVC

Question

我在使用 Ajax 发送表单时遇到问题。

这是表格:

<form method="POST" id="add-card-form" action="${pageContext.request.contextPath}/card/add" class="form-horizontal">
 <select name="type" class="form-control">
    <c:forEach items="${cardTypes}" var="cardType">
       <option value="${cardType.id}">${cardType.name}</option>
    </c:forEach>
 </select>
 <select name="category" class="form-control">
    <c:forEach items="${cardCategories}" var="cardCategory">
       <option value="${cardCategory.id}">${cardCategory.name}</option>
    </c:forEach>
 </select>
<textarea type="text" name="description" class="form-control" rows="6"></textarea>
 <input type="submit" id="add-card-submit" value="Add card" class="btn btn-primary"/>

这是 Ajax 函数:

$(document).on('submit', '#add-card-form', function(e) {
    var frm = $('#add-card-form');
    e.preventDefault();

    var Form = this;
    var data = {};

    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });

    //temporary solution
    data["type"] = parseInt(data["type"]);
    data["category"] = parseInt(data["category"]);

    console.log(data);
    if(frm.valid()) {
        $.ajax({
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: JSON.stringify(data),
            success:  reloadBoard,
            error: function (callback) {
                console.log(callback);
            }
        });

        refreshForm(frm);
    }
});

这是一个 Controller 操作:

@RequestMapping(value="/add", method = RequestMethod.POST)
public @ResponseBody Card addCard(@RequestBody Integer type,
                                  @RequestBody Integer category,
                                  @RequestBody String description) {

    Card card = new Card();

    card.setType(cardTypeService.findById(type));
    card.setCategory(cardCategoryService.findById(category));
    card.setDescription(description);
    card.setOwner(1);

    cardService.saveCard(card);

    System.out.println("Card with id " + card.getId() + " added!");

    return card;
}

变量数据值:

Object {type: 1, category: 1, description: "New Card"}

当我尝试发送此表单时，我总是收到错误 400:http://localhost:8080/card/add 400(错误请求)

你能告诉我这段代码有什么问题吗？我读过一些关于使用 Spring MVC + Ajax 发送数据的帖子和文章，但没有人提供帮助。

编辑:

我将@RequestBody更改为三个@RequestParams:

 @RequestMapping(value="/add", method = RequestMethod.POST)
public @ResponseBody Card addCard(@RequestParam("type") Integer type,
                                  @RequestParam("description") String description,
                                  @RequestParam("category") Integer category) {

我仍然收到 400 错误。这是原始 HTTP 请求:

POST/card/add HTTP/1.1
主机:本地主机:8080
连接:保持事件状态
内容长度:48
缓存控制:无缓存
编译指示:无缓存
来源:http://localhost:8080
X 请求方式:XMLHttpRequest
内容类型:application/json；字符集=UTF-8
接受:application/json、text/javascript、*/*； q=0.01
用户代理:Mozilla/5.0(Windows NT 6.1；WOW64)AppleWebKit/537.36(KHTML，如 Gecko)Chrome/36.0.1985.125 Safari/537.36
引用地址:http://localhost:8080/
接受编码:gzip、deflate、sdch
接受语言:pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Cookie:JSESSIONID=ABAD895C419A9175EAB4D0833C543724

和数据对象:

category: 1
description: "New Card"
type: 1

Answer 1

Dmitry Zolotukhin 说得对，唯一合理的事情是只有一个 @RequestBody，因为您只能使用该请求一次，之后该请求将被提交，并且所有后续读取尝试都将失败。

您应该做的是将您的 Card 类作为方法参数，并用 @RequestBody 注释，因此

@RequestMapping(value="/add", method = RequestMethod.POST)
public @ResponseBody Card addCard(@RequestBody Card card) {
    card.setOwner(1);
    cardService.saveCard(card);
    System.out.println("Card with id " + card.getId() + " added!");
    return card;
}

spring mvc 框架将负责 Card 对象的实例化，并通过将 JSON 主体中的键与属性进行匹配，将请求值绑定(bind)到属性。另请注意，要使其正常工作，您发送的数据必须是有效的 json，因此请确保遵守该规定。

您可以考虑创建一个简单的数据传输对象，例如CardDTO 类似于

public class CardDTO {
    private Integer category;
    private Integer type;
    private String descrption;

    public Integer getCategory() {
        return category;
    }

    public void setCategory(Integer category) {
        this.category = category;
    }

    public Integer getType() {
        return type;
    }

    public void setType(Integer type) {
        this.type = type;
    }

    public String getDescrption() {
        return descrption;
    }

    public void setDescrption(String descrption) {
        this.descrption = descrption;
    }
}

然后绑定(bind)到它

@RequestMapping(value="/add", method = RequestMethod.POST)
public @ResponseBody Card addCard(@RequestBody CardDTO cardDTO) {