How to pass in Parameters into a c++ file from input of a HTML page using AJAX?

I have seen that your code has some bugs. Let me give some bugs fixes.

HTML:

1. The <br> is a self-closing tag. According to the HTML specification you could use: <br> or <br /> when DOCTYPE is XHTML. So your HTML markup must be like this:

<h1>Mileage Calculator</h1>
<div id="input">
  <form>
    <label>Starting City: *required</label>
    <input id="startCity" name="startCity">
    <label>Starting State: *required</label>
    <input id="startState" name="startState">
    <label>Ending City: *required</label>
    <input id="endCity" name="endCity">
    <label>Ending State: *required</label>
    <input id="endState" name="endState"><br>
    <button id="btnLoadFile" type="button">Submit</button>
  </form>
</div>
<div>
  <table id="displayInfo"></table>
</div>

2. It's a good practice to use unobtrusive JavaScript. Here we have a reference: The principles of unobtrusive JavaScript. You can add an id attribute to your <button>. Like this: <button id="btnLoadFile" type="button">Submit</button> then you can programmatically control the behavior of this element by using its id attribute through document.getElementById() without using the onclick="loadFile()" directly. Something like this:

var btnLoadFile = document.getElementById("btnLoadFile");
btnLoadFile.onclick = function() {
  // Some code...
};

JavaScript: In this case by using EcmaScript 5 standard.

1. Helper function to perform asynchronous requests. First of all, you need a helper function to perform asynchronous request by using XMLHttpRequest object. Something like this:

var newXHR = null; // Once initialized with the XMLHttpRequest object, you can use the abort() method from anywhere in the code.

function sendXHR(options, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.open(options.type, options.url, true);
  newXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  newXHR.send(options.data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response);
    }
  };
}

With the above function, you can make an asynchronous request by setting some options like url or http method.

sendXHR({
  url: url,
  type: "GET"
}, function(response) {
  // Gets the response from the asynchronous request by using XMLHttpRequest object.
  console.log(response);
});

2. Rendering table with results: You have missed some closing tags: <tr></tr>, <th></th> and <td></td>. You can concatenate your txt variable by using this code:

txt += "<tr><th>Starting Location</th><th>End Location</th><th>Miles in Between</th><tr>";
txt += "<tr><td>";
txt += data.trip.startCity;
txt += ", ";
txt += data.trip.startState;
txt += "</td><td>";
txt += data.trip.endCity;
txt += ", ";
txt += data.trip.endState;
txt += "</td><td>";
txt += data.trip.miles;
txt += "</td></tr>";

You can see the full source here:

(function() {

  var newXHR = null; // Once initialized with the XMLHttpRequest object, you can use the abort() method from anywhere in the code.

  function sendXHR(options, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(options.type, options.url, true);
    newXHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    newXHR.send(options.data);
    newXHR.onreadystatechange = function() {
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }

  window.onload = function() {
    var btnLoadFile = document.getElementById("btnLoadFile");
    btnLoadFile.onclick = function() {

      alert("This works");

      // Declare variables.
      var sCity = document.getElementById("startCity");
      var sState = document.getElementById("startState");
      var eCity = document.getElementById("endCity");
      var eState = document.getElementById("endState");

      // Validate variable availability of the HTML element.
      if (sCity && sState && eCity && eState) {

        // Build url to perform HTTP Request by using XMLHttpRequest object.
        var url = "/cgi-bin/cs213/mileageAjaxJSON?startCity=";
        url += sCity.value;
        url += "&startState=";
        url += sState.value;
        url += "&endCity=";
        url += eCity.value;
        url += "&endState=";
        url += eState.value;

        sendXHR({
          url: url,
          type: "GET"
        }, function(response) {

          var obj = response;
          var data = JSON.parse(obj);
          var txt = "";

          txt += "<tr><th>Starting Location</th><th>End Location</th><th>Miles in Between</th><tr>";
          txt += "<tr><td>";
          txt += data.trip.startCity;
          txt += ", ";
          txt += data.trip.startState;
          txt += "</td><td>";
          txt += data.trip.endCity;
          txt += ", ";
          txt += data.trip.endState;
          txt += "</td><td>";
          txt += data.trip.miles;
          txt += "</td></tr>";
          document.getElementById("displayInfo").innerHTML = txt;
        });
      }
    };
  };
}());

<h1>Mileage Calculator</h1>
<div id="input">
  <form>
    <label>Starting City: *required</label>
    <input id="startCity" name="startCity">
    <label>Starting State: *required</label>
    <input id="startState" name="startState">
    <label>Ending City: *required</label>
    <input id="endCity" name="endCity">
    <label>Ending State: *required</label>
    <input id="endState" name="endState"><br>
    <button id="btnLoadFile" type="button">Submit</button>
  </form>
</div>
<div>
  <table id="displayInfo"></table>
</div>