我需要在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>
答案 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));