Search code examples
javascriptjavaformshttp-post

HTTP Post Request canceled

I have a javascript service that adds a country to a list in a postgresql database. Everything works fine but when I pull up the network tab in the chrome dev tools, the post request is not completed and it shows canceled in the status column.

Status

When I look at the general header there is no post request executed

Headers

This is what the Javascript code where the request is put together looks like:

function toevoegenLand(){
  document.querySelector("#toevoegen").addEventListener("click", function (){
  var formData = new FormData(document.querySelector("#toevoegform"));
  var encData = new URLSearchParams(formData.entries());
  
  var fetchoptions = {method: 'POST', body:encData, headers: {'Authorization' : 'Bearer ' + window.sessionStorage.getItem("sessionToken")}};
  
  fetch("restservices/countries/", fetchoptions)
  .then(response => response.json())
  .then(function(myJson){ console.log(myJson); });
  
  location.reload();
  
})

The request is handled in WorldResource.Java

@POST
@RolesAllowed("user")
@Produces("application/json")
public Response addCountry(@Context SecurityContext sc, 
                           @FormParam("addCode")String c,
                           @FormParam("addCountry")String nm,
                           @FormParam("addCapital") String h,
                           @FormParam("addRegion") String r,
                           @FormParam("addOpp") double o,
                           @FormParam("addPop") int i,
                           @FormParam("addGov")String g,
                           @FormParam("addCon")String cn){
    
    Country newLand = service.saveLand(c, nm, h, r, o, i, g, cn);
    System.out.println(newLand);
    return Response.ok(newLand).build();
}

The HTML form is nothing special

<form id="toevoegform">
            Code:<input type="text" id="addCode" name="addCode"><br>
            Land:<input type="text" id="addCountry" name="addCountry"><br>
            Hoofdstad:<input type="text" id="addCapital" name="addCapital"><br>
            Regio:<input type="text" id="addRegion" name="addRegion"><br>
            Oppvervlakte:<input type="text" id="addOpp" name="addOpp"><br>
            Inwoners:<input type="text" id="addPop" name="addPop"><br>
            Overheid:<input type="text" id="addGov" name="addGov"><br>
            Continent:<input type="text" id="addCon" name="addCon"><br>
            <button type="button" id= "toevoegen">Toevoegen</button>
            </form>

Why is the request canceled? Or how can I figure this out?

Solution

  • It's probably because you reload the page before request completion. do this instead:

    fetch("restservices/countries/", fetchoptions)
    .then(response => response.json())
    .then(function(myJson){
        // Here you are sure that your request has been done 
        location.reload();
    });

    Since you are dealing with Promise (code ran asynchronously) you have no way to be sure it will be executed before the following instructions.

    Hope it helped.