Ajax 发布请求调用不起作用

Question

我的 Ajax 调用有问题。 这是我的控制器：

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

我的 sendMessage.jsp 中有一个应该返回 json 的表单。但是 ajax 调用不起作用，所以现在我试图让它通过 ajax 调用返回 html，这对用户应该没有影响。我现在要做的就是使用 html 返回进行简单的 ajax 调用。 这是我的jsp中的表格：

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

这按预期工作，所以这就是省略逻辑的原因。 我尝试在表单后添加以下脚本：

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

所以现在当我尝试像以前一样提交表单时，我会在 ajax 调用弹出之前收到 ajax 警报，但没有发送页面发布请求，也没有任何反应。有谁知道出了什么问题？

非常感谢..

Answer 1

试试这个检查你发送和接收的内容：

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

对于 URL，您需要对 jQuery url 进行子索引：$('#postForm')[0].action 或获取属性 url：$('#postForm').attr('action');显然第二个只是路径，第一个会给你整个 URL。如果这样做，可以跳过 for 循环：

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

forEach 的问题在于并非所有浏览器都支持**