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>

由于我对这样的编码不是很熟悉，所以任何帮助将不胜感激。

编辑：

我也使用这样的脚本进行了尝试，但仍然得到了相同的响应：

<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测试了它，响应是这样的：

{“消息”：“错误请求”，“原因”：“ val：无失败规范：：user-system.spec / login-request谓词：map？\ n“}

Answer 1

这里有几个问题。

脚本元素的无效开始标记。这可能是复制和粘贴错误，但值得一提：

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

在两个位置选择register_form而不是#register_form，第二个位置是不必要的，因为您可以引用this。这也导致表单提交没有被取消。
您没有包括$.serializeJSON插件，我再次假设这是复制和粘贴错误。
$.serializeJSON（无论您选择哪个）都应该返回JSON字符串，但是您对结果运行JSON.stringify，它将是字符串中的一个字符串。
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>

尝试

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

2 个答案: