1

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:

jquery ajax function not working

Why the AJAX function is not getting called and alert is not getting printed upon calling the function?

Ajax not being called

Duyx
  • 11
  • 3
  • Before you post the form, when you first load the page, is there any error on the browser's debugging console? – David Jun 07 '19 at 15:05
  • Yes, there was an error but i realised the solution was just to add a script tag with the source to Google's jQuery library. So the problem in the browser debugger is gone but the main problem is still there. – Duyx Jun 07 '19 at 15:22
  • When the script executes there is no form yet, so the handler isn't being attached. You should add the handler in a DOM-ready function. – Dave Newton Jun 07 '19 at 15:28

0 Answers0