javascript - 为什么没有对 spring Controller 进行 ajax 调用 我应该做什么更改？

Question

我需要在 html 和 JS 中的按钮单击事件期间从文本字段中获取 2 个数字，然后通过 ajax 将这些值传递给 spring mvc Controller 。

var button = document.getElementById("myBtn");
button.addEventListener("click", myFunction);

function myFunction() {
  var v1 = document.getElementById('n1').value;
var v2 = document.getElementById('n2').value;
var str = {"value1":  v1 , "value2":v2};
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.open("POST", "http://localhost:8080/Cloudnet/login/addNumber", true);
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify(str));
xmlhttp.onreadystatechange = function() {
	 console.log(xmlhttp.response);
 }
}

<br>
<label for="n1">first number:</label>
<input type="text" class="form-control" id="n1">
<label for="n2">second number:</label>
<input type="text" class="form-control" id="n2">
<br>
<button type="button" id="myBtn" class="btn btn-success">Add</button>
<script type="text/javascript" src="${path}/js/cloudnet/cloudnet.js"></script>
<%-- <button type="submit" class="btn btn-primary" href="<c:url value="/addItem.jsp"/>">Click</button> --%>
  </div>

---

我还附上了我的 Spring Controller 片段

---

@RequestMapping(value = "/addNumber", method = RequestMethod.POST)
@ResponseBody
public String controllerMethod(@RequestBody DataRequest request){
    Integer value1 = request.getValue1();
    Integer value2 = request.getValue2();
    System.out.println("values :"+value1+" , "+value2);
    int result=value1+value2;
    System.out.println(result);
    String res=Integer.toString(result);
    return res;
}

我的 pojo 类详细信息:我直接在 Controller 中传递这个 pojo

  public class DataRequest {
    private Integer value1;
    private Integer value2;
    public Integer getValue1() {
        return value1;
    }
    public void setValue1(Integer value1) {
        this.value1 = value1;
    }
    public Integer getValue2() {
        return value2;
    }
    public void setValue2(Integer value2) {
        this.value2 = value2;
    }
}

---

Answer 1

您必须正确地告诉 Spring 您的资源(JavaScript 和/或 CSS 文件)位于何处。在您的 Spring 上下文配置中，您应该像这样映射资源:

<mvc:resources mapping="/resources/**" location="/resources/"/>

确保 location 指向您的 /src/main/webapp/resources 文件夹。在文件夹中，您应该有 ./js/cloudnet.js 文件。在您的 JSP 上，您可以像这样访问这个 JavaScript 文件:

<spring:url var="js" value="/resources/js/cloudnet.js"/>
<script type="text/javascript" src="${js}"></script>

如果您需要有关其配置方式的更多详细信息，我刚刚提供了您的(稍作修改的)代码的工作示例 here .