在JSON對象中提交表單值

Question

我正在學習Polymer.js。 目前，我只是在使用一個簡單的Web應用程序來登錄用戶。目前，每當我提交表單時，它都會以下面顯示的格式（而不是完整的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>

sign-in-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偵聽器，即輸入和更改。 您可以使用。