在 JSON 对象中提交表单值

Question

我正在努力学习 polymer.js。目前我只是在开发一个简单的网络应用程序来让用户登录。目前，每当我提交我的表单时，它都会以下面显示的这种格式提交，而不是完整的 JSON 对象。

{
  email: "email@email.com",
  password: "password"
}

而不是...

{
  "email":"email@email.com",
  "password":"password"
}

这是我的代码：

<form action="http://httpbin.org/post" method="post">

  <sign-in-input email="{{_email}}" password="{{_password}}"></sign-in-input>

  <input class = "paperbtn" type="submit" value="Sign in">

  <input name="email" value="[[_email]]" hidden>
  <input name="password" value="[[_password]]" hidden>

</form>

登录-input.html:

    <dom-module id="sign-in-input">
<template>
      <paper-input label = "Email" id = "email" required></paper-input>
      <paper-input label = "Password" id = "password" required></paper-input>
</template>

<script>
  Polymer({
    is: 'sign-in-input',

    properties: {
      email: {
        type: String,
        notify: true
      },
      password: {
        type: String,
        notify: true
      }
    },

    listeners: {
      'input': '_onInput'
    },

    _onInput: function() {
      this.email = this.$.email.value.trim();
      this.password = this.$.password.value.trim();
    }
  });
</script>

Answer 1

当您应该发送一个字符串时，您却发送了一个对象 (obj)。

您是否在要发送的对象上使用了JSON.stringify(obj)？

其他您没有询问的事情。

_onInput: function() {
  this.email = this.$.email.value.trim();
  this.password = this.$.password.value.trim();
}

您应该使用 this.set('email', this.$.email.value.trim() 因为 this.set 在 Polymer 中发送一个事件来更新值。现在这不是问题，但如果您继续使用 this.[property].

，它可能会出现在其他元素中

  <paper-input label = "Email" id = "email" required></paper-input>
  <paper-input label = "Password" id = "password" required></paper-input>

您可以立即将侦听器绑定到这些，以避免使用：

listeners: {
  'input': '_onInput'
},

_onInput: function() {
  this.email = this.$.email.value.trim();
  this.password = this.$.password.value.trim();
}

它看起来像：

 <paper-input label="Email" id="email" value="{{email::input}}" required></paper-input>
 <paper-input label="Password" id="password" value="{{password::change}}" required></paper-input>

我使用了两种 Polymer 监听器，input 和 change。您可以使用任何一种。

在 JSON 对象中提交表单值

Submit form values in JSON object

html

javascript

polymer