0

I have these steps to follow in order to accomplish an ajax request to a cgi server:

Create a Web Application that can be used as a mileage calculator. Your html page (assign12.html) must include four input fields representing the start city, start state, destination city, and destination state. The four input elements must use the following values for the "name attribute" of each input element: startCity, startState, endCity, endState. Be sure you spell the names correctly when you build the query string that you will append to the URL to make the Ajax request to run my C++ CGI program. The web page must make an AJAX request to the following URL: /cgi-bin/cs213/mileageAjaxJSON.

Your query string must be appended to this URL. The CGI program returns the mileage data as JSON text. Here is a sample format of the JSON text string. Warning: the tmode array may be missing sometimes!

{ "trip" :{ "startcity" : "Boise","startstate" : "ID","endcity" : "Denver","endstate" : "CO","miles" : "814","tmode" :["Plane","Car","Bus","Bike","Foot"]}}

You must then incorporate the content from this JSON text string into the existing web page so that it looks professional. Note: You may get the data using the XMLHttpRequest object's responseText property. Call JSON.parse() to convert the JSON string in responseText to a JavaScript object. The content must be retrieved from the JavaScript object and formatted nicely to be displayed in your web page. Display the content only, not the JSON string!

The state input field in your HTML page must only allow two characters.

You must do client side validation to be sure the form is completely fill out. Warning: Do not send the AJAX request via a <form> tag using the action attribute or onsubmit event. This causes problems because the form is reset on a successful send. Make the AJAX request using an onclick event from a standard button or other element.

The part where I'm stuck is that I don't know if I should look for parameters or not.

This is the code I have thus far

function mileage() {
    mileage = new XMLHttpRequest();
    mileage.onload = function () {
        document.getElementById("response").innerHTML = this.responseText;
        startcity = document.getElementById("startCity").innerHTML;
        startstate = document.getElementById("startState").innerHTML;
        endcity = document.getElementById("endcity").innerHTML;
        endstate = document.getElementById("endState").innerHTML;
    }
    mileage.open("GET", "/cgi-bin/cs213/mileageAjaxJSON?q="+startcity+"&q2="+startstate+"&q3="+endcity+"&q4="+endstate, true);
    mileage.send();
phentnil
  • 2,195
  • 2
  • 14
  • 22
leon_gom
  • 1
  • 1
  • 1
    Now that I've put the code markdown fences in \`\`\` can you reformat your code and copy it inside the backticks to make this question more readable? – Henry Ecker Mar 26 '22 at 22:19
  • "Your query string must be appended to the URL" means you need to pass your query as URL parameters indeed. Also, it doesn't really matter that the server is written in C++ CGI, as long as it's a web server. Finally, your code may have been truncated, there's a mix of `mileage` and `xhttp`. Try following a simple XmlHttpRequest hello world tutorial online before doing your exercise. – pyb Mar 26 '22 at 22:25
  • This really just sounds like it wants you to capture all the form fields and put them in the query string. See the linked duplicate at the top of your post – Phil Mar 28 '22 at 03:09

0 Answers0