Liftweb：创建一个既可以是传统的，用AJAX提交的表单 [英] Liftweb: create a form that can be submitted both traditionally and with AJAX

问题描述

是否有可能在电梯的web框架来创建表单（和链接），它通过AJAX的反应，但也努力不支持JavaScript？如果是这样，怎么样？

Is it possible in Lift web framework to create forms (and links) that react via AJAX, but also work without Javascript support? If so, how?

在我建立使用表格＆LT;电梯：form.ajax＆GT; ，表单的动作设置为的javascript：// ，以便它不再没有JS提交。如果我建立一个没有明确的AJAX支持的形式，我不知道如何插入AJAX功能。

When I build the form using <lift:form.ajax>, the form's action is set to javascript:// so that it no longer submits without JS. If I build the form without explicit AJAX support, I don't know how to insert the AJAX functionality.

我想我可以构建一个RESTful接口（我们将不得不建立一个反正）和编写定制的Javascript通过提交表单。我想避免code复制，但：是否可以处理所有三个输入（REST风格，传统的HTTP POST，AJAX）与同code，这将是最好的。

I suppose I could build a RESTful interface (we'll have to build that anyway) and write custom Javascript to submit the form through that. I would like to avoid code duplication, though: if it is possible to handle all three inputs (RESTful, traditional HTTP POST, AJAX) with the same code, that would be best.

推荐答案

看看 HTTP：//演示。 liftweb.net/form_ajax

<一个href="https://github.com/lift/examples/blob/master/combo/example/src/main/scala/net/liftweb/example/snippet/FormWithAjax.scala"相对=nofollow称号=斯卡拉snipet为例GitHub上> FormWithAjax.scala

class FormWithAjax extends StatefulSnippet {
   private var firstName = ""
   private var lastName = ""
   private val from = S.referer openOr "/"

def dispatch = {
   case _ => render _
}

def render(xhtml: NodeSeq): NodeSeq =
{
   def validate() {
      (firstName.length, lastName.length) match {
         case (f, n) if f < 2 && n < 2 => S.error("First and last names too short")
         case (f, _) if f < 2 => S.error("First name too short")
         case (_, n) if n < 2 => S.error("Last name too short")
         case _ => S.notice("Thanks!"); S.redirectTo(from)
      }
   }

   bind( "form", xhtml, 
      "first" -> textAjaxTest(firstName, s => firstName = s, s => {S.notice("First name "+s); Noop}),
      "last" -> textAjaxTest(lastName, s => lastName = s, s => {S.notice("Last name "+s); Noop}),
      "submit" -> submit("Send", validate _)
   )
}

的 form_ajax.html

<lift:surround with="default" at="content">
  Enter your first and last name:<br>
  <form class="lift:FormWithAjax?form=post">
      First Name: <form:first></form:first>
      Last Name: <form:last></form:last>
      <form:submit></form:submit>
   </form>
</lift:surround>

和这工作没有JavaScript的：

And this will work without javascript:

<form action="/form_ajax" method="post">
   <input name="F1069091373793VHXH01" type="hidden" value="true">
   First Name: <input value="" type="text" name="F1069091373788OVAAWQ" onblur="liftAjax.lift_ajaxHandler('F1069091373789N2AO0C=' + encodeURIComponent(this.value), null, null, null)">
   Last Name: <input value="" type="text" name="F1069091373790VANYVT" onblur="liftAjax.lift_ajaxHandler('F1069091373791CJMQDY=' + encodeURIComponent(this.value), null, null, null)">
   <input name="F1069091383792JGBYWE" type="submit" value="Send">
</form>

这篇关于Liftweb：创建一个既可以是传统的，用AJAX提交的表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！