response.render() not rendering correct page

I have a form on one page. I am trying to submit that form and send that data to a new page. However, response.render() is not rendering the new page, instead the page with the form on it is just being reloaded.

page with form = historicalReport.ejs, new page = historicalReportGraph.ejs

This is the code to submit the form in historicalReport.ejs

$("#newHistoricalReportForm").validate({
  rules: {
    latitude: {
      required: true
    }, 
    longitude: {
      required: true
    }, 
    year: {
      required: true
    },
    ppm_type: {
      required: true
    }
  },
  submitHandler: function(form) {
    submitNewHistoricalReportForm();
  }
});
function submitNewHistoricalReportForm() {
    var form = document.getElementById("newHistoricalReportForm");
    var year = form.elements[0].value;
    var latitude = form.elements[1].value;
    var longitude = form.elements[2].value;
    var ppm_type = form.elements[3].value;

$.ajax({
  type: 'POST',
  dataType: 'html',
  url: '/api/historicalGraph',
  data: { latitude: latitude, longitude: longitude, year: year, ppm_type: ppm_type}, 
  success: function (data) {
    alert("The historical report will be displayed!");
  },
  error: function (data) {
    alert("Something went wrong, please try again later!");
  }
});

This is the code in queries.js

app.post('/api/historicalGraph', function(request, response, next) {
const data = {
  year: request.body.year,
  latitude: request.body.latitude,
  longitude: request.body.longitude,
  ppm_type: request.body.ppm_type
};

response.render('pages/historicalReportGraph', {
  year: data.year,
  latitude: data.latitude,
  longitude: data.longitude,
  ppm_type: data.ppm_type,
  email: request.user.email,
  privilege: request.user.privilege
});

});

via Veronica