I have a problem with getting an ajax POST request working. I am trying to send data from a form to a server (running on tomcat) and receive an answer. Based on the answer and the success of the call, i will do something. The problem is, that It seems like the HTML document ignores the Jquery-script which has the ajax call. When i submit the form, the data is sent to the specified URL, fetched by the server via @FormParam and an answer is returned. When the answer is received, the entire HTML document changes to the answer from the server. I want to control exactly what happens with the answer, by using the success/error attributes in the .ajax() mehod. In the following example, i use an allert() function inside the success-attribute, but this is never called.
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>$("#myForm").submit(function (e) {
e.preventDefault();
var form = $(this);
var method = form.attr("method");
var url = form.attr("action");
$.ajax({
type : method,
url : url,
data : form.serialize(),
success : function (data) {
alert(data);
},
error : function () {
alert("failed to get data")
}
});
});
</script>
</head>
<body>
<form id="myForm" method="post" action="rest/service/form">
<input name="name" type = "text" placeholder="write a name">
<input name="id" type = "text" placeholder="choose an id">
<input name="amount" type = "text" placeholder="choose an amount">
<input name="submit" type = "submit">
</form>
</body>
</html>
The code from the server is:
@Path("service")
public class HelloService {
@POST
@Path("form")
public String getFormParameters (@FormParam("name") String name, @FormParam("id") Integer id, @FormParam("amount") int amount ){
return ("The chosen input is the following: name= "+ name + " id= " + id + " amount= " + amount);
}
I have checked the browser for error messeges, but none is made. I have also tried placing the script inside the body, under and above the form.
I have already seen these posts, but the answers didn't solve the problem: