Ajax发布请求调用不起作用

Question

I have a problem with the my Ajax call. Here is my controller:

@RequestMapping(value = { "/sendMsg" }, method = RequestMethod.POST)
public ModelAndView postSendMessage(@ModelAttribute("message") MsgParam param) {
ModelAndView result= new ModelAndView("sendMessage");
...Controller logic...
}

I have a form in my sendMessage.jsp that should return json. However the ajax call wouldn't work so now I am trying to get this to return html through ajax call, which should make no difference to the user. All I want to do for now is make a simple ajax call with html return. And here is the form in my jsp:

<form:form id="postForm" method="POST" commandName="message" action="${pageContext.request.contextPath}/sendMsg">
    ... input fields with path attributes...
</form:form>

This works as expected, so that is why omitted the logic. I tried adding the following script after the form:

<script>
        $('#postForm').submit(function(evt) {
                evt.preventDefault();
                alert("ajax");
                msgData = $('#postForm').serialize();
                $.ajax({
                url: $('#postForm').action,
                type: 'POST',
                data: msgData
                });
        });
    </script>

So now when I try submitting the form same as before, I get the ajax alert before the ajax call popping up but the page post request is not sent and nothing happens. Does anyone have any idea what is wrong?

Thanks a lot..

Answer 1

Try this to inspect what you are sending and receiving:

<script type="text/javascript">
//Wait for jQuery to be loaded
$(function(){

function _submitHandler(evt){
            evt.preventDefault();
            //form data placeholder
            var formData={};
            //Serialize the form as an array of objects{name and value}
            var msgData = $('#postForm').serializeArray();
            //fill the formData object with name:value pairs
            //from the serialized array
            for(var i=0, l=msgData.lenght; i<l; i++){
              formData[msgData[i].name]=msgData[i].value;
            }
            //Prepare ajax Object
            var ajaxObj = {
                url: $('#postForm')[0].action,
                type: 'POST',
                data: formData
            };
            //Inspect ajax object in console
            console.log("Ajax Call");
            console.log(ajaxObj);
            $.ajax(ajaxObj,function(response){
                console.log("Server Response");
                console.log(response);});
            }
$('#postForm').submit(_submitHandler);

});
</script>

For the URL you need to subindex the jQuery url: $('#postForm')[0].action or get the attribute url: $('#postForm').attr('action'); obviously the second one will be only the path and the first one will give you the whole URL. The for loop can be skipped if you do this:

$("#postForm").serializeArray().forEach(function(el){formData[el.name]=el.value});

the problem with the forEach is that is not supported by all the browsers**