MVC javascript ajax call results in xmlhttprequest warning

Question

When running the following code I get the desired results updating my view on success, but I also get a warning in the console and certain items on the page don't work any more. I though putting the async option in would have sorted it but obviously not.

Can anyone suggest how I should change this?

xmlhttprequest on the main thread is deprecated because of its detrimental effects to the end user's experience

$("#addSelectedModules").on("click", function () {
    event.preventDefault();
    $('#createLearningPathForm').validate();
    if ($('#createLearningPathForm').valid()) {
        var request = $.ajax({
            async: true,
            type: "POST",
            url: "/umbraco/Surface/CreateLearningPath/SetSelectedList",
            data: $('#createLearningPathForm').serialize(),
            success: function (data) {
                $("#top").html(data);
            },
            error: function (data) {
                //$('#failModal').removeClass("d-none").addClass("d-block");
            }
        })
    }
}
);