Как отправить AJAX запрос к API

<div class="modal-content">
        <span class="close">&times;</span>
        <h3 align="center">Registration</h3>
        <div class="form_wrapper">
            <div class="form_container">
              <div class="title_container">
              </div>
              <div class="row clearfix">
                <div class="">
                  <form>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                      <input type="email" name="email" placeholder="Email" id="email" required />
                    </div>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-lock"></i></span>
                      <input type="password" name="password" placeholder="Password" id="password" required />
                    </div>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                        <input type="text" name="company" placeholder="Company" id="company" required />
                      </div>
                      <div class="input_field select_option">
                        <select id="country">
                          <option>Select a country</option>
                          <option>Russia</option>
                          <option>Italia</option>
                          <option>Germany</option>
                        </select>
                        <div class="select_arrow"></div>
                      </div>
                      <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                        <input type="text" name="adress" placeholder="Adress" id="adress" required />
                      </div>
                    <div class="row clearfix">
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="number" name="postalcode" maxlength="6" id="postal_code"  placeholder="Postal Code" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="text" name="city" id="city" placeholder="City" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="number" name="telephone" id="telephone" placeholder="Telephone" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="text" name="website" id="website" placeholder="Website" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="text" name="firstname" id="first_name" placeholder="First Name" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="text" name="lastname" id="last_name" placeholder="Last Name" required />
                        </div>
                      </div>
                    </div>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                        <input type="text" name="position" id="position" placeholder="Position in the company" required />
                      </div>
                      <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                        <input type="text" name="industry" id="industry" placeholder="Industry in which your company is working" required />
                      </div>
                          <!-- <div class="input_field radio_option">
                        <input type="radio" name="radiogroup1" id="rd1">
                        <label for="rd1">Male</label>
                        <input type="radio" name="radiogroup1" id="rd2">
                        <label for="rd2">Female</label>
                        </div> -->
                      <!-- <div class="input_field checkbox_option">
                          <input type="checkbox" id="cb1">
                          <label for="cb1">I agree with terms and conditions</label>
                      </div> -->

                      <div class="dynamic_fields">
                        <div class="example_student">
                            <div class="table">
                                <div class="cell"><input class="form-control" type="text" name="name[]"/></div>
                                <div class="cell">
                                    <button class="js-remove pull-right btn btn-danger">-</button>
                                </div>
                            </div>
                        </div>
                        <div class="students"></div>
                    
                        <button class="js-add pull-right btn btn-success" id="AddBtn">Add Industry</button><br><br><br>
                    </div>
        
                    <input class="button" type="submit" value="Register" />
                  </form>
                </div>
              </div>
            </div>
          </div>
    </div>

Есть форма, не понимаю как отправить AJAX запрос, читаю и не понимаю как такое вообще делается, отправить мне нужно к API /api/AddUser


Ответы (1 шт):

Автор решения: nazarpunk

const $form = document.getElementById(`myForm`);

$form.addEventListener(`submit`, e => {
    e.preventDefault();
    fetch($form.action, {
        method: $form.method,
        body  : new FormData($form)
    })
        .then(response => response.text())
        .then(data => console.log(data))
        .catch(err => console.error(err));
});
<div class="modal-content">
        <span class="close">&times;</span>
        <h3 align="center">Registration</h3>
        <div class="form_wrapper">
            <div class="form_container">
              <div class="title_container">
              </div>
              <div class="row clearfix">
                <div class="">
                  <form id="myForm" action="/api/AddUser" method="POST">
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                      <input type="email" name="email" placeholder="Email" id="email" required />
                    </div>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-lock"></i></span>
                      <input type="password" name="password" placeholder="Password" id="password" required />
                    </div>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                        <input type="text" name="company" placeholder="Company" id="company" required />
                      </div>
                      <div class="input_field select_option">
                        <select id="country">
                          <option>Select a country</option>
                          <option>Russia</option>
                          <option>Italia</option>
                          <option>Germany</option>
                        </select>
                        <div class="select_arrow"></div>
                      </div>
                      <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                        <input type="text" name="adress" placeholder="Adress" id="adress" required />
                      </div>
                    <div class="row clearfix">
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="number" name="postalcode" maxlength="6" id="postal_code"  placeholder="Postal Code" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="text" name="city" id="city" placeholder="City" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="number" name="telephone" id="telephone" placeholder="Telephone" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="text" name="website" id="website" placeholder="Website" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="text" name="firstname" id="first_name" placeholder="First Name" />
                        </div>
                      </div>
                      <div class="col_half">
                        <div class="input_field"> <span><i aria-hidden="true" class="fa fa-user"></i></span>
                          <input type="text" name="lastname" id="last_name" placeholder="Last Name" required />
                        </div>
                      </div>
                    </div>
                    <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                        <input type="text" name="position" id="position" placeholder="Position in the company" required />
                      </div>
                      <div class="input_field"> <span><i aria-hidden="true" class="fa fa-envelope"></i></span>
                        <input type="text" name="industry" id="industry" placeholder="Industry in which your company is working" required />
                      </div>
                          <!-- <div class="input_field radio_option">
                        <input type="radio" name="radiogroup1" id="rd1">
                        <label for="rd1">Male</label>
                        <input type="radio" name="radiogroup1" id="rd2">
                        <label for="rd2">Female</label>
                        </div> -->
                      <!-- <div class="input_field checkbox_option">
                          <input type="checkbox" id="cb1">
                          <label for="cb1">I agree with terms and conditions</label>
                      </div> -->

                      <div class="dynamic_fields">
                        <div class="example_student">
                            <div class="table">
                                <div class="cell"><input class="form-control" type="text" name="name[]"/></div>
                                <div class="cell">
                                    <button class="js-remove pull-right btn btn-danger">-</button>
                                </div>
                            </div>
                        </div>
                        <div class="students"></div>
                    
                        <button class="js-add pull-right btn btn-success" id="AddBtn">Add Industry</button><br><br><br>
                    </div>
        
                    <input class="button" type="submit" value="Register" />
                  </form>
                </div>
              </div>
            </div>
          </div>
    </div>

→ Ссылка