Ajax work for form, how to get response?

Question

JavaScript

Here is the function with ajax

function f (e) {
        e.preventDefault();
    var xhr = new XMLHttpRequest();

var json = JSON.stringify({
  name: "login"
});

xhr.open("POST", 'form.php', true)
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');

xhr.send(json);
 
  xhr.onreadystatechange = function(){
    if (xhr.readyState != 4) return;
    if (xhr.status != 200){
      alert(xhr.status + ': ' + xhr.statusText);
    }else{ 
      alert(xhr.responseText)
    }
  }
}

This is the shape

<?php
if(isset($_POST['login'])){
echo "<br/>login = ". $_POST['login'];
}
?>

I insert form.php into index via include,
when I click on the button I execute the function, but the console writes an error 404 (not found)
I do everything in wordpress on my own theme, the form itself works without ajax, but ajax is needed ..
what am I doing wrong?

Answer 1

xhr.open("POST", 'form.php', true)

???
It looks like you don't really understand what and how it should work ...

Answer 2

If the form.php file is in your theme folder, then the address of this file will be site/wp-content/themes/theme-name/form.php