warum Ajax Anruf nicht zum Frühling Controller gemacht wird, welche Änderungen sollte ich tun?

Question

Ich muss 2 Zahlen aus einem Textfeld während eines Button-Click-Ereignisses in HTML und JS holen und dann diese Werte über Ajax an Spring-Mvc-Controller übergeben.

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() { 
 
\t 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>

---

Ich habe aslo

mein Frühling Controller Schnipsel befestigt

---

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

Meine pojo Klasse Details: ich direkt am Bestehen dieser pojo innerhalb Controller

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

@RequestBody kommentierten Parameter wird erwartet, dass der gesamte Körper der Anforderung zu halten und um ein Objekt zu binden. Ändern Ihre Controller-Methode wie folgt:

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

Für js, versuchen, etwas wie folgt aus:

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

Answer 2

Sie haben Frühling richtig zu sagen, wo sind Ihre Ressourcen (JavaScript und/oder CSS-Dateien) entfernt. In Ihrer Frühling Kontextkonfiguration sollten Sie Mapping für Ressourcen wie diese:

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

Sicherstellen, dass die location Punkte Ihres /src/main/webapp/resources Ordner. In dem Ordner sollten Sie die ./js/cloudnet.js Datei haben. Auf Ihrer JSP können Sie diese JavaScript-Datei wie folgt zugreifen:

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

Wenn Sie mehr Details benötigen, wie es konfiguriert ist, habe ich legte das Arbeitsbeispiel für Ihre (leicht modifiziert) Code here gerade.