Как разместить данные формы в формате JSON?

Question

Я пытаюсь создать сайт регистрации для группового проекта, над которым мы работаем, но не могу понять, как отправить данные формы в виде json. Я много пробовал гуглить и менять код, но ничего не получается. У меня проблема в том, что когда я нажимаю на кнопку отправки, я получаю такую ​​ошибку от API:

{"": ["Ввод неверен."]}

Я думаю, причина в том, что моя форма не отправляет данные в формате JSON, и они форматируют их в соответствии с документацией по API. Мой код формы выглядит так:

<form id="register_form" action="https://https://url.com/users/register" method="post">
        <input type="text" pattern="[A-Za-z]{1,20}" placeholder="Name" name="name" title="Up to 20 alphabetical characters" required>
        <input type="email" placeholder="Email" name="email" title="Must be a valid email address" required>
        <input type="password" pattern="[a-zA-Z0-9-]+{8,20}" placeholder="Password" name="password" title="Must be 8 or more characters long and contain at least one number and one uppercase letter" required>
        <input type="text" pattern="[a-zA-Z0-9-]+" placeholder="Homeadress" name="homeadress">
        <input type="text" placeholder="Postnumber" name="postnumber">
        <input type="text" placeholder="City" name="city">
        <br>
        <button value="Submit" type="submit">Register</button>
</form>

И скрипт, который я пытался заставить работать, выглядит так:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>

<script type="text/javascript">
  $('register_form').on('submit', function(event){

    var obj = $('register_form').serializeJSON();

    $.ajax({
        type: 'POST',
        url: 'https://url.com/users/register',
        dataType: 'json',
        data: JSON.stringify(obj),
        contentType : 'application/json',
        success: function(data) {
            alert(data)
        }
    });

   return false;
 });
</script>

Любая помощь будет принята с благодарностью, поскольку я не очень хорошо разбираюсь в подобных вещах.

Edit:

Я также попробовал это с помощью сценария, подобного этому, но все еще получал тот же ответ:

<script>

$(document).ready(function(){

    $("#submit").on('click', function(){

   var formData = {

        "name": $('input[name=name]').val(),
        "email": $('input[name=email]').val(),
        "password": $('input[name=password]').val(),
        "homeadress": $('input[name=homeadress]').val(),
        "postnumber": $('input[name=postnumber]').val(),
        "city": $('input[name=city]').val()
    };

       $.ajax({
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        url: 'https://url.com/users/register', 
        type : "POST", 
        dataType : 'json', 
        data : JSON.stringify(formData), 
        success : function(result) {

            console.log(result);
        },
        error: function(xhr, resp, text) {
            console.log(xhr, resp, text);
        }
    })
});
});

Я проверил это вместе с тестами API наших учителей, и ответ такой:

{"message": "Неверный запрос", "причина": "val: nil не работает spec:: user-system.spec / логин-запрос-предикат: map? \ N"}

Answer 1

Здесь есть пара проблем.

1. Неверный начальный тег для элемента скрипта. Вероятно, это была ошибка копирования и вставки, но стоит упомянуть:

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>
                                                    missing greater than symbol ^
   

2. При выборе register_form вместо #register_form в двух местах второе было ненужным независимо от того, что вместо него можно ссылаться на this. Это также привело к тому, что отправка формы не была отменена.

3. Вы не включили плагин $.serializeJSON, опять же я предполагаю, что это ошибка копирования и вставки.

4. $.serializeJSON (в зависимости от того, что вы выберете) должны вернуть строку JSON, но вы запустите JSON.stringify для результата, который будет строкой внутри строки.

5. https://https:// Это не очень большая проблема, потому что это атрибут action формы, которую никогда не следует отправлять, но о которой стоит упомянуть.

В приведенном ниже примере я предоставил простую замену $.serializeJSON и исправил остальные проблемы, перечисленные выше. serialize_form в приведенном ниже коде можно заменить на любой плагин $.serializeJSON, который вы решите использовать.

Я прокомментировал ajax-запрос, поскольку здесь действительно важно получить JSON из данных формы, поэтому я просто записываю его в консоль, чтобы вы могли видеть, что это строка JSON. Я также удалил атрибуты шаблона и необходимые флаги из ввода для простоты тестирования.

const serialize_form = form => JSON.stringify(
  Array.from(new FormData(form).entries())
       .reduce((m, [ key, value ]) => Object.assign(m, { [key]: value }), {})
);

$('#register_form').on('submit', function(event) {
  event.preventDefault();
  const json = serialize_form(this);
  console.log(json);
  /*$.ajax({
    type: 'POST',
    url: 'https://url.com/users/register',
    dataType: 'json',
    data: json,
    contentType: 'application/json',
    success: function(data) {
      alert(data)
    }
  });*/
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="register_form" action="https://url.com/users/register" method="post">
  <input type="text" placeholder="Name" name="name" title="Up to 20 alphabetical characters">
  <input type="email" placeholder="Email" name="email" title="Must be a valid email address">
  <input type="password" placeholder="Password" name="password" title="Must be 8 or more characters long and contain at least one number and one uppercase letter">
  <input type="text" placeholder="Homeadress" name="homeadress">
  <input type="text" placeholder="Postnumber" name="postnumber">
  <input type="text" placeholder="City" name="city">
  <br>
  <button value="Submit" type="submit">Register</button>
</form>

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"</script>

<script type="text/javascript">
  $('#registerForm').on('submit', function(event){

    var obj = $('#registerForm').serializeJSON();

    $.ajax({
        type: 'POST',
        url: 'https://url.com/users/register',
        dataType: 'json',
        data: JSON.stringify(obj),
        contentType : 'application/json',
        success: function(data) {
            alert(data)
        }
    });

   return false;
 });
</script>

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