为什么没有对ajax调用spring控制器应该做些什么改变?

时间:2017-12-10 11:34:52

标签: javascript java ajax spring spring-mvc

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



'w'

10110




我已经附加了我的Spring控制器代码段

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

我的pojo课程详情: 我直接在控制器内传递这个pojo

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

2 个答案:

答案 0 :(得分:2)

您必须正确地告诉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的工作示例。

答案 1 :(得分:1)

@RequestBody带注释的参数应该包含请求的整个主体并绑定到一个对象。 更改您的控制器方法如下:

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) {
        Value2 = value2;
    }
}

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

对于js,尝试这样的事情:

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