Как отправить AJAX запрос к API
<div class="modal-content">
<span class="close">×</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">×</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>