I wanna submit a form without refreshing

here is the code:

<form id="rout" >
    <div class="mb-3">
        <label for="exampleInputEmail1" class="form-label">your id</label>
        <input type="text" class="form-control" onchange="" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
    <div class="mb-3">
       <label for="exampleInputPassword1" class="form-label">first name</label>
       <input type="text" class="form-control" id="exampleInputPassword1">
    </div>
    <div class="mb-3">
        <label for="exampleInputPassword111" class="form-label">last name </label>
        <input type="text" class="form-control" id="exampleInputPassword111">
    </div>
    <div class="d-grid gap-2">
        <button id="btbtbt" class="btn btn-primary" type="submit" style="text-decoration: none ">
            submit
        </button>
    </div>
</form>

<script>
    const myForm = document.getElementById("rout");
    myForm.addEventListener("submit", (e)=>{
      e.preventDefault();
      const req = new XMLHttpRequest();
      req.open("post","router.php");
      req.onload= function (){
        console.log(req.responseText);
      }
      req.send(new FormData(myForm));
    });
</script>

focus on the script part

here is what I got:

I know this code works

I tested it before

but it's not working in here

What could be the reason?