Working between .jsp, servlet and javascript/jquery, how to connect all three to show data from api

Question

I am at my wits end, I have probably seen every tutorial on YT, every StackOverflow question and every blog online and I still cannot get this to work.

I am making a weather app using forecast.io (Dark Sky) and using a library file by David Ervideira. My goal right now is to

1. Get a form which takes in a latitude and longitude value from the user in my index.jsp
2. Uses those values and in the doPOST method of my Driver.java, connect to the darksky api which uses those two coordinates to grab weather information back from their database.
3. Use javascript/jquery/ajax to show that information once the user clicks the "submit" button in a box below the form itself without refreshing the page.

I have so far been able to take in the coordinates, connect to the api through Driver.java but show the results in a separate page.

EDIT: These results only redirect and show and a separate page when I delete the code out of the basic.js file.

index.jsp

    <div class="container">
    <form id="weatherForm" class="form" method="post" action="${pageContext.request.contextPath}/Driver">
        <h2 class="form-heading">Please enter destination</h2>
        <label for="latitude" class="sr-only">Latitude:</label> 
        <input type="text" name="latitude" id="latitude" placeholder="Latitude" class="form-control">       
        <label for="longitude" class="sr-only">Longitude:</label>   
        <input type="text" name="longitude" id="longitude" placeholder="Longitude" class="form-control">
        <button class="btn btn-lg btn-primary btn-block" type="submit" id="submit">Check Weather</button>
    </form>
</div>
<div id="result" class="result"></div>

basic.js

$(document).ready(function(){
$("#submit").click(function(){

    var url = "Weather/Driver";
    var latitude = $("#latitude").val();
    var longitude = $("#longitude").val();

     $.ajax({
        url: url,
        type: "POST",
        data: {
            latitude: latitude,
            longitude: longitude,
        },
        success: function(data){

                $("#result").html("Latitude: " + data.latitude);
                $("#result").html("Longitude: " + data.longitude);
                $("result").slideDown(500);
                $("result").slideDown(500);
        }
     });
    return false;
});

});

Driver.java

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/plain");
        PrintWriter out = response.getWriter();

        String latitude = request.getParameter("latitude");
        String longitude = request.getParameter("longitude");

        System.out.println("Latitude: " + latitude);
        System.out.println("Longitude: " + longitude);

        ForecastIO fio = new ForecastIO("MYKEY");
        fio.setUnits(ForecastIO.UNITS_SI);
        fio.setExcludeURL("hourly,minutely");
        fio.getForecast(latitude, longitude);

        System.out.println("Latitude: "+fio.getLatitude());
        System.out.println("Longitude: "+fio.getLongitude());
        System.out.println("Timezone: "+fio.getTimezone());
        System.out.println("Offset: "+fio.offset());

        FIOCurrently currently = new FIOCurrently(fio);
        //Print currently data
        System.out.println("\nCurrently\n");
        String [] f  = currently.get().getFieldsArray();
        for(int i = 0; i<f.length;i++)
         // return response
            out.println(f[i]+": "+currently.get().getByKey(f[i]));


}

}

Additional info:

• Using jQuery 3.1.1 and bootstrap
• Files should be linked properly with the .xml file
• The Driver.java raw values can be shown on another page via redirection but not without refreshing.
• I've tried using GET and POST through ajax, each tutorial showed me a different ajax code but maybe I just couldn't apply it to my situation
• Running locally on Eclipse with Tomcat 8.5, planning to eventually be able to deploy the app through AWS
• Results only show from the location when I delete my basic.js code - that is, it redirects me to a new window to list the array.
• The basic.js is not working at the moment, meaning the code currently it useless as it has had countless revisions all from different tutorials but the overall "meaning" should be there.

Let me know if I have missed any critical information. Cheers.