为什么 POST 请求变成了 GET 请求？

Question

当我使用 jQuery 的 $.ajax() 或 $.post() 方法将表单信息发送到服务器时，'data' 字符串会添加到 url 的末尾。为什么 POST 请求变成了 GET 请求？如下所示的表单代码

<form role="form" class="form-horizontal">
    <div class="box-body">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="name" name="name" required>
            </div>
        </div>
        <div class="form-group">
            <label for="hospital" class="col-sm-2 control-label">Hospital</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="hospital" name="hospital" required>
            </div>
        </div>
        <div class="form-group">
            <label for="url" class="col-sm-2 control-label">URL</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="url" name="url" required>
            </div>
        </div>
        <div class="form-group">
            <label for="version" class="col-sm-2 control-label">Version</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="version" name="version" required>
            </div>
        </div>
        <div class="form-group">
            <label for="description" class="col-sm-2 control-label">Description</label>
                <div class="col-sm-10">
                    <textarea class="form-control" id="description" name="description" rows="3" required></textarea>
                </div>
        </div>
    </div>
    <div class="box-footer text-center">
        <button type="reset" class="btn btn-default">Reset</button>
        <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
    </div>
</form>

Ajax 代码

$("#submitBtn").submit(function(event) {
    event.preventDefault();
    var info = {};
    info.name = $("#name").val();
    info.hospital = $("#hospital").val();
    info.url = $("#url").val();
    info.version = $("#version").val();
    info.description = $("#description").val();
    $.post("/nuts/add", JSON.stringify(info), function(data) {
            console.log(data);
        }, "json");
}

网址总是这样

http://localhost:8080/nuts/add.html?name=1&hospital=1&url=1&version=1&description=1

我的后端框架是Spring MVC，控制器代码如下图

@RestController
@RequestMapping(value = "/nuts/add", produces = {APPLICATION_JSON_VALUE})
public class AddNutsApi {

    private MongoBasicDao<Nuts> mongoBasicDao;

    @Autowired
    public void setMongoBasicDao(MongoBasicDao<Nuts> mongoBasicDao) {
        this.mongoBasicDao = mongoBasicDao;
    }

    @RequestMapping(value = "", produces = {APPLICATION_JSON_VALUE}, method = RequestMethod.POST)
    public ResponseEntity<Void> addNutsPost(@RequestBody Nuts nuts) throws NotFoundException {
        if (nuts.getName() != null && nuts.getHospital() != null && nuts.getUrl() != null && nuts.getVersion() != null && nuts.getDescription() != null) {
            try {
                Nuts _nuts = new Nuts();
                _nuts.setName(new String(nuts.getName().getBytes("ISO-8859-1"), "UTF-8"));
                _nuts.setHospital(new String(nuts.getHospital().getBytes("ISO-8859-1"), "UTF-8"));
                _nuts.setUrl(new String(nuts.getUrl().getBytes("ISO-8859-1"), "UTF-8"));
                _nuts.setVersion(new String(nuts.getVersion().getBytes("ISO-8859-1"), "UTF-8"));
                _nuts.setDescription(new String(nuts.getDescription().getBytes("ISO-8859-1"), "UTF-8"));
                _nuts.setCreationTime(new Date());
                Integer mark = mongoBasicDao.getCollectionMark(Constant.COLLECTION_NUTS);
                _nuts.setMark(mark);
                mongoBasicDao.addObject(_nuts, Constant.COLLECTION_NUTS);
                return new ResponseEntity<>(HttpStatus.OK);
            } catch (Exception e) {
                return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
            }
        } else {
            return new ResponseEntity<>(HttpStatus.BAD_REQUEST);
        }

    }
}

我已经添加了jackson的依赖（jackson-databind），并在Spring MVC配置文件中设置了<mvc:annotation-driven/>。顺便说一下，DispatcherServlet 的 url-pattern 是 / 。 谁能告诉我我哪里弄错了？非常感谢！

Answer 1

当你调用JSON.stringify(info) 时，你会得到一个 JSON 字符串，例如像这样：

{ "name": "1", "hospital": "1", "url": "1", "version": "1", "description": "1" }

你肯定不会得到这样的查询字符串：

?name=1&hospital=1&url=1&version=1&description=1

这应该是您的提示，即 JavaScript 代码不对您看到的 GET 请求负责。

问题是您绑定了提交功能错误。 $("#submitBtn").submit(...) 不做任何事情，因为 <button type="submit"> 不会触发任何 submit 事件。 <form> 可以。

发生的情况是JavaScript代码被忽略，点击Submit按钮会触发表单的提交，由于<form>元素没有method="post"属性，表单将被提交作为GET。

解决方案：将submit(...)绑定到<form>。