如何将表单数据作为 JSON 发布？

Question

I'm trying to build a registration site for a group project we are working on but can't figure out how to send the form data as json. I've tried googling a lot and changing the code but nothing seems to work. The problem I have is that when i press on the submit button I get an error like this from the API:

{"":["The input was not valid."]}

I think the reason is that my form does not send the data as JSON and it's they format they require according to their API documentation. My form code looks like this:

<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>

And the script i've been trying to get to work looks like this:

<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>

Any help would be greatly appreciated since I'm not very familiar with coding stuff like this.

Edit:

I also tried it with a script like this but still getting the same response:

<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);
        }
    })
});
});

I tested it with our teachers test api also and the response is this:

{"message":"Bad Request","reason":"val: nil fails spec: :user-system.spec/login-request predicate: 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 字符串。我还从输入中删除了模式属性和所需标志，以便于测试。

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

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)
    }
  });*/
});