What is required of me here?

Question

JavaScript

I can't understand the essence of the task:

If the validation was successful, the submit button of the form should become inactive and an ajax request should be sent to the address specified in the action attribute of the form.*

There can be 3 options for responding to the request with different behavior for each:
a. {"status":"success"} – the resultContainer should be set to the class success and content added with the text "Success"
b. {"status":"error","reason":String} - the resultContainer should be set to the error class and content added with the text from the reason field
c. {"status":"progress","timeout":Number} - the resultContainer class should be set to the class progress and the request should be repeated after timeout milliseconds (the logic should be repeated until the response returns a status other than progress)

* For ease of submit testing forms, you can execute requests for static files with different prepared response options (success.json, error.json, progress.json). Raising a separate server with different responses will be redundant.

For a long time I can’t figure out where to send the ajax request, because no addresses are specified anywhere.
About static files is also unclear.
Who will help to understand, I will be grateful.

Answer 1

It says "Raising a separate server with different responses will be redundant", instead of a full-fledged server, you need to do this: "For submitting a form, you can execute requests for static files."
Those. create a separate server.js or server.php file and write in it the code that will randomly generate one of the answers, you can use pre-prepared ones (success.json, error.json, progress.json) as answers.
PS. Can I apply for a job instead of you?))

Answer 2

1. About addresses. Ask your customer about this.
2. If the validation was successful, the form submit button should become inactive and an ajax request should be sent to the address specified in the action attribute of the form.* Write success: function(data) handler in which you check data['status'] and depending from the value, block the button or, if necessary, make another ajax request. No difference.
3. Static files. The customer meant that you can upload ordinary text files to the server in advance, which, upon entering, will give out one json response, so that you practice.

Answer 3

There must be a part of the task with an html form, in which the action attribute must contain the address of the dynamic request handler.
If we consider in the simplest version, when the page makes a request to itself, then it will look something like this:
UPD I'm sorry, I sketched without testing, now I've corrected it to a fully working version.

<form method="POST" name=f1 action="">
  <input type="text" name="data" value=value>
  <button name="submit" onclick="sendForm(); return false;">Отправить</button>
</form>

<script type="text/javascript">
function sendForm () { // 
  var f1= document.forms.f1,
    button= f1.submit;
  console.log('f1= ', f1);

  // very stuped validation
  if(f1.data.value.length) {
    var xhr = new XMLHttpRequest();
    console.log('xhr= ', xhr);
    xhr.open('POST', f1.action, true);
    var f1v= new FormData(f1);
    xhr.send(f1v); 
    console.log('f1v= ', f1v);

    
    xhr.onreadystatechange = function() { 
      if (xhr.readyState != 4) {
        console.log('xhr.readyState= ', xhr.readyState);
        return;
      }
      
      button.innerHTML = 'Готово!';

      if (xhr.status != 200) {
        alert(xhr.status + ': ' + xhr.statusText);
      } else {
        alert(xhr.responseText);
      }

    }

    button.innerHTML = 'Загружаю...'; 
    button.disabled = true;
  } else console.log('f1.data.length= ', f1.data.length);
}




</script>

<?php
if(!empty($_POST['data'])) echo 'Выдаём какие-то данные' ;
elseif(isset($_POST['data'])) echo 'Чего-то не вышло';

?>

Example of work: https://js-master.ru/?Javascripts___Free_hide...