html programming

Outcomes

• Using ajax with jQuery.
• Process JSON data.

Scoring

• If the provided web pages in the provided project version cannot be opened or read, your score will be zero.
• Deductions will be made for not meeting the requirements i.e. names of files or folders as requested, functionality.
• Also, see the rubric for more specific grading information.

Repository

• In gitlab, create a new project named 383-H08-<section>-<UID>-FourRandomCharacters, where <section> is your section (A, B, C, D, or E); UID is your unique ID, and FourRandomCharacters are any four random characters.
• Make the following people developers on your project
  • All sections: castroa (Instructor)
  • Only section A: silwals (Teaching Assistant) 
  • Only section B, C: wangy75 (Teaching Assistant)
  • Only section D, E: yeb2 (Teaching Assistant)
• Clone the project into your web folder (public_html/cse383/).
• Copy the existing form assignment project’s (Homework 07) files to this new folder (do not copy the .git/ folder).

Assignment

• Update the project such that it submits the data via an AJAX post.
• Upon a successful POST the application will receive JSON data which the application will then display.

API

• You will use the following API for POSTING your data.

1. url
   1. ceclnx01.cec.miamioh.edu/~castroa/cse383/homework08/form-ajax.php
2. Data Sent
   1. user: string
   2. affiliation: string
   3. comment: string
   4. car: string
   5. color: string
3. Result:
   1. data[]
      1. user
      2. affiliation
      3. comment
      4. car
      5. color
      6. timestamp
   2. status: “OK” or “FAIL”
   3. msg: String
   4. if OK, it will also contain data[]

• Note: This only responds to a POST request.

Requirements

1. Your HTML application will start with the form.
2. After validating all inputs (as you already should have done), override the submit so that it makes an jQuery/ajax POST call to the above URL.
3. Upon success and if status == ok, hide the form and display the returned data as a table.
4. Upon an error, display an error message to the user.
5. At the bottom of the page, place a button that will cause the form to be unhidden which will allow the user to enter new form data.
6. Make sure you HTML is valid, indented, and well commented

Details

1. You must place ALL javascript in an external script file.
2. You still must validate the user input via jQuery before calling submit.
3. You must check for ajax post errors. I will randomly (about 50% of the time) cause the API to return errors. If you get an error you should show an appropriate message to the user.

Comments

1. Making the ajax call.
   1. You need to make sure to set the content type of the sending ajax when making the call as well as making sure to stringify the data object.
   2. Then part of the ajax call will look like:
      • $.ajax( {
        • url: …,
        • contentType: ‘application/json’,
        • data: JSON.stringify(dataFromForm),