Получить API POST, не отправляя <form>данных - PullRequest
Новая
       7

Получить API POST, не отправляя <form>данных

1 голос
/ 11 апреля 2020

Я получаю сервер ошибок 500, когда пытаюсь отправить данные формы в мой API /users/signup. Я проверил, что API работает с помощью Postman, поэтому я считаю, что способ, которым я делаю свою публикацию извлечения, неправильный. Какова лучшая практика здесь?

JS

document.getElementById("create_user").addEventListener("click", (e) => {
    e.preventDefault();
    const signup = {
        username: document.querySelector("#create_username").value.toString(),
        email: document.querySelector("#create_email").value.toString(),
        password: document.querySelector("#create_password").value.toString()
    }
    const data = new FormData();
    data.append("json", JSON.stringify(signup));
    fetch('/users/signup', {
        method: 'POST',
        body: data
    })
    .then((response) => response.json())
    .catch((error) => {
        console.error('Error:', error);
    });
});

HTML

<form class="hide" id="sign_up_form">
    <div class="form-row">
        <h3>Sign up</h3>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <label for="create_username">Username</label>
            <input id="create_username" name="username" type="text" class="form-control" placeholder="Username">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <label for="create_email">Email</label>
            <input id="create_email" name="email" type="email" class="form-control" placeholder="Email">
        </div>
    </div>
    <div class="form-row">
        <div class="form-group col">
            <label for="create_password">Password</label>
            <input id="create_password" name="password" type="password" class="form-control" placeholder="Password">
            <small id="passwordHelp" class="text-muted">
                Must be at least 8 characters long
            </small>
        </div>
    </div>
    <div class="form-row flex-end">
        <div class="form-group col-auto">
            <button id="create_user" type="submit" class="btn btn-warning mb-2">Sign up</button>
        </div>
    </div>
    <div class="form-row">
        <span class="mr-2">Already have an account?</span><a href="javascript:void(0)" id="login_btn">Login</a>
    </div>
</form>

1 Ответ

1 голос
/ 11 апреля 2020

Вам не нужно создавать объект формы, вы можете напрямую отправить данные json в свой бэкэнд.

Добавить свои json данные в теле и заголовок 'Content-Type': 'application/json' в request.

Свойство value метода querySelector всегда будет возвращать строку, вам не нужно вызывать метод toString для нее.

Попробуйте это. 

document.getElementById("create_user").addEventListener("click", (e) => {
    e.preventDefault();
    const signup = {
        username: document.querySelector("#create_username").value,
        email: document.querySelector("#create_email").value,
        password: document.querySelector("#create_password").value
    }
    fetch('/users/signup', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(signup)
    })
        .then((response) => response.json())
        .then(data => console.log(data))
        .catch((error) => {
            console.error('Error:', error);
        });
});
...