Spring & jQuery：AJAX 调用找不到控制器函数的路径

Question

好的，我正在通过 jQuery 向我的 Spring Controller 提交一个简单的表单。代码如下：

<form id="addNote" role="form" action="addNote" method="POST">
        <div class="form-group error">
            <label for="note">Enter your Note </label>
            <textarea rows="3" cols="50" name="note" class="form-control"
                id="note"></textarea>
        </div>
        <div class="alert alert-danger" style="display: none">
            <strong>Error!</strong> Text length must not exceed 100 characters
        </div>
        <button type="submit" class="btn btn-default">Save Note</button>

$(document).ready(function(){
    $("#addNote").submit(function(e){
        e.preventDefault();
        var formObj = $(this);
        var formURL = "addNote";
        var formData = $("#note").val();
        $.ajax({
            url: formURL,
            type: 'POST',
            data: formData,
            success: function(response){
                alert(response);
            },
            error: function(response){

            }
        });
    });
});

以及Controller方法：

@RequestMapping(value="/addNote", method=RequestMethod.POST)
public Vector<String> addNote(Locale locale, Model model, HttpServletRequest httpServletRequest, HttpSession httpSession){
    String note = httpServletRequest.getParameter("note");
    notes.add(note);
    ModelAndView mv = new ModelAndView("notes");
    mv.addObject("thenotes", notes);
    return notes;
}

我需要将 notes 对象返回给 jQuery，以便我可以将其数据显示为输出。但这是我在 Chrome 控制台中遇到的错误：

所以显然路径中存在问题。我尝试在 jQuery 中将var formURL = "addNote"; 更改为var formURL = "assessment/addNote";，但它不起作用。

但由于某种原因，如果我将控制器中addNote() 函数的返回值更改为ModelAndView 并返回mv，那么它可以工作，但这不是我需要的 jQuery 中的响应。

Answer 1

首先你使用的是AJAX，所以你不能使用modelAndView返回数据。你必须以xml/json的形式返回数据。

在您的 javascript 代码中添加以下函数：

function getContextPath() {
       return window.location.pathname.substring(0, window.location.pathname.indexOf("/",2));
    }

参考：How do you get the contextPath from JavaScript, the right way?

然后将你的formURL改为：

var formURL = getContextPath()+"/addNote";

通过上面的代码请求到达控制器。在控制器内您必须稍微更改一下您的 requestMapping：如果您想返回一些简单的消息，那么您可以将其作为字符串返回（我不确定这是否是最好的方法，但我就是这样做的）

@RequestMapping(value = "/addNote", produces=MediaType.APPLICATION_XML_VALUE, method = RequestMethod.GET)
        @ResponseBody
        public String showNote(){

            System.out.println("saving note..");

             return "<response>Example</response>";

        }

如果您想将 Vector 或 java 对象返回给 JQuery，那么最好的办法是使用 jackson-mapper 或一些类似的库，您可以使用 google 轻松找到信息。更简单（不一定更好的解决方案）将是定义一个方法，通过循环遍历向量来创建 xml 字符串，比如：

<notes>
<note>note1</note>
<note>note2</note>
</notes>

并将其作为字符串从控制器返回，然后在 JQuery 中处理 xml。

我也学习spring，所以如果有人知道更好的解决方案，我会很乐意阅读它;-)

问候， 米卡洛8

编辑：我已经将requestMethod改为GET，否则你必须处理CSRF TOKENS。如果你想使用POST，在互联网上很容易找到如何处理csrf令牌。