Binding.scala使用教程11--表单提交

package app

import com.thoughtworks.binding.dom
import com.thoughtworks.binding.Binding.Var
import org.scalajs.dom.FormData
import org.scalajs.dom.ext.Ajax
import org.scalajs.dom.html.Input
import org.scalajs.dom.raw.Event

import scala.scalajs.concurrent.JSExecutionContext.Implicits.queue
import scala.scalajs.js.JSON
import scala.util.{Failure, Success}


object View
{

  case class Form(email: Var[String], password: Var[String])

  val form, responseForm = Form(Var(""), Var(""))

  val submitForm =
  {
    event: Event =>
      println(form.email.value, form.password.value)
      val formData = new FormData()
      formData.append("email", form.email.value)
      formData.append("password", form.password.value)
      val result = Ajax.post("/login", data = formData)
      result.andThen
      {
        case Success(response) =>
          val json = JSON.parse(response.responseText)
          responseForm.email.value = json.email.toString
          responseForm.password.value = json.password.toString
      }

  }

  @dom def render =
  {

   <div>
     <div class="ui middle aligned text  center aligned grid container">
        <div class="column">
          <form class="ui large form">
            <div class="ui stacked segment">
              <div class="field">
                <div class="ui left icon input">
                  <i class="user icon"></i>
                  <input type="text" name="email" placeholder="邮箱地址" oninput={ event: Event => form.email.value = event.currentTarget.asInstanceOf[Input].value }/>
                </div>
              </div>
              <div class="field">
                <div class="ui left icon input">
                  <i class="lock icon"></i>
                  <input type="password" name="password" placeholder="密码" oninput={ event: Event => form.password.value = event.currentTarget.asInstanceOf[Input].value }/>
                </div>
              </div>
              <div class="ui fluid large teal submit button" onclick={submitForm}>登录</div>
            </div>
            <div class="ui error message"></div>

          </form>
            <div class="ui segments">
               <div class="ui segment">{responseForm.email.bind}</div>
               <div class="ui segment">{responseForm.password.bind}</div>
            </div>
        </div>

     </div>

    </div>
  }
}