Why the POST request becomes a GET request?

Question

When I use jQuery's $.ajax() or $.post() method to send form information to server, the 'data' string is added to the end of the url. Why the POST request becomes a GET request? The form code shown below

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

$("#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");
}

The url always like this

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

My backend framework is Spring MVC, and the controller code shown below

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

    }
}

I have added jackson's dependency(jackson-databind), and set the <mvc:annotation-driven/> in the Spring MVC configuration file. By the way, the DispatcherServlet's url-pattern is / . Can anyone tell me where am I getting it wrong? Thanks a lot!

Answer 1

When you call JSON.stringify(info), you will get a JSON string , e.g. something like this:

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

You certainly will not get a query string like this:

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

That should be your hint that the JavaScript code is not responsible for the GET request you see.

The problem is that you're binding the submit function wrong. $("#submitBtn").submit(...) doesn't do anything, because a <button type="submit"> doesn't fire any submit events. The <form> does.

What happens is that the JavaScript code is ignored, and clicking the Submit button will trigger a submit of the form, and since the <form> element doesn't have a method="post" attribute, the form will be submitted as a GET.

Solution: Bind the submit(...) to the <form>.