Не отправляются POST запросы на ajax

Question

Пытаюсь сделать отправку POST запросов с помощью ajax. Если честно, то уже не могу найти на свой вопрос уже 3 дня. Пробовал на обычной отправке без ajax через xhr, но когда наложил функцию на кнопку, выходила ошибка. Решил повесить на функцию, содержащую функцию (прошу прощения за тавтологию), которая и отправляет запросы на сервер, но они почему-то не отправлялись. Решил сделать все с помощью ajax, но и тут даже после подключения библиотеки не отправляются запросы. Помогите пожалуйста.

<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
    <link rel="stylesheet" href="css/form/style.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>

<body>
    <div class="form">
        <form action="#" method="post">
            <h1>Анкета</h1>
            <div class="formInput">
                <div class="inputData">
                    <input type="text" name="Username" placeholder="Имя" required class="Username" id="Username">
                    <box-icon name='user'></box-icon>
                </div>
            <div class="inputData">
                <input type="number" name="PhoneNumber" placeholder="Телефон" required class="PhoneNumber" id="PhoneNumber">
                <box-icon name='phone'></box-icon>
            </div>
            <div class="inputData">
                <input type="email" name="e-mail" placeholder="Электронная почта" required class="email" id="Email">
                <box-icon name='envelope'></box-icon>
            </div>
        </div>

    </form>
    <button class="button" id="Button" onclick="Send()">Создать</button>


</div>
<script type="text/javascript" src="js/form/xhr.js"></script>


</body>

jQuery(document).ready(function ($) {
    let requestURL = "https://jsonplaceholder.typicode.com/users";

    let Username = document.querySelector("#Username").value;
    let PhoneNumber = document.querySelector("#PhoneNumber").value;
    let Email = document.querySelector("#Email").value;

    let button = document.querySelector("#Button");

    function Send() {

        let form = {
            user_name: Username,
            phone_number: PhoneNumber,
            email: Email
        }

        $.ajax({
            type: "POST",
            url: requestURL,
            data: form
        })
    }
});

Answer 1

Не очень понятно, зачем усложнять себе жизнь ajax, когда есть стандартный fetch

Ниже пример отправки запроса на чистом javaScript

// Запускаем код после загрузки HTML
document.addEventListener('DOMContentLoaded', () => {
  // Выбираем input
  const txt = document.getElementById('txt');
  // Выбираем кнопку и вешаем обработчик на событие клика
  document.getElementById('btn').addEventListener('click', () => {
    // Указываем хост отправки
    const url = 'https://jsonplaceholder.typicode.com/users';
    // Формируем тело сообщения
    const msg = {
      text: txt.value
    }
    // Отправляем запрос
    fetch(url, {
        method: 'POST', // Метод POST
        body: JSON.stringify(msg), // Сообщение передается строкой
      })
      .then(r => r.ok ? r.json() : 'Error')
      .then(res => console.log(res)) // Если успех, обрабатываем ответ
      .catch(e => console.log(e)); // Если ошибка, обрабатываем ошибку
  });
});

<input type="text" id="txt" />
<button id="btn">send</button>

Answer 2

А preventDefault кто вызывать будет? И вообще, надо событие submit использовать, а не click.

Answer 3

Потому что функция Send определена внутри анонимной функции, снаружи этой функции неизвестна и поэтому к кнопке не подцепляется. А UserName, PhoneNumber и Email у вас определяются до того, как пользователь успеет что-нибудь сделать.

// Это не нужно
// jQuery(document).ready(function ($) {
//});

function Send() {
    $.ajax({
        type: "POST",
        url: "https://jsonplaceholder.typicode.com/users",
        data: {
            user_name: document.querySelector("#Username").value,
            phone_number: document.querySelector("#PhoneNumber").value,
            email: document.querySelector("#Email").value
        }
    })
}

БЛОГ НА HUSL

Не отправляются POST запросы на ajax

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