【问题标题】:How to send manual jQuery Ajax request to JSF application?如何向 JSF 应用程序发送手动 jQuery Ajax 请求?
【发布时间】:2023-03-14 16:53:02
【问题描述】:

我正在使用 jQuery 执行POST-request,这似乎成功了。但是如何在服务器端使用它并修改响应?
我是否需要另一个 servlet,因为 Faces Servlet 不是为处理这个问题而设计的?

$.ajax({type:'POST', data:{"status":status}, success: function(response) {
    alert("Qapla'");
}});

它用于以下过程:

  1. 用户输入地址并点击commandButton调用JS
  2. JS 使用谷歌地图检索地理数据并将其发送到服务器(我正在考虑使用上述代码)
  3. 服务器响应从数据库发送一些靠近的地方
  4. JS 再次使用谷歌地图检索准确距离并将其发送到服务器
  5. 服务器将客户端重定向到具有结果的下一页

在一种情况下,可能需要对使用的 inputText 进行失败的验证:在第 2 点,服务器将地理数据评为无效。

【问题讨论】:

    标签: jquery ajax jsf jsf-2


    【解决方案1】:

    如果通过通常的 JSF 方式发送 ajax POST(UICommand 组件、jsf.ajax.request() 等,类似于<h:commandButton><p:remoteCommand><o:commandScript> 等)由于某种原因确实不是一个选项在您的问题中未指定,那么您确实最好创建一个单独的 servlet 甚至是 JAX-RS 或 JAX-WS webservice 监听这些请求并返回例如XML、JSON 等。JSF 是基于 HTML 表单的 MVC 框架,而不是 Web 服务框架。

    您只需要考虑在之后操作 JSF 组件的 HTML 表示时正确处理 JSF 视图状态。例如。当您使用自定义 JS/ajax 启用由 <h:commandButton> 生成的禁用 HTML 按钮而不涉及/通知 JSF 时,它不会在 JSF 组件状态下显示为启用,并且永远不会调用其操作。

    另见:

    【讨论】:

    • 感谢您的回答。我想使用jsf.ajax.request() 没有多大意义,但也许我错了。我在问题中添加了一些关于“用途”的信息,很高兴听到您对此的看法。
    • 如果您尝试在“普通”HTML/JS/jQuery 中处理它而不真正理解 JSF 的意义,这将长期困扰您。您需要摆弄填充隐藏输入并使用jsf.ajax.request()(或<p:remoteCommand>,因为您显然正在使用PrimeFaces)。为此使用现成的 JSF 组件会更容易。鉴于您正在使用 PrimeFaces,或者至少熟悉它(您的问题历史就是证据),那么只需抓住它的 <p:gmap> 组件。这是它的展示:primefaces.org/showcase/ui/gmapHome.jsf
    • 不幸的是 Primesfaces'<p:gmap> 不允许您进行地理编码或计算我使用 Google Maps Javascript API 服务的距离。我当前的解决方案确实涉及很多隐藏输入,<p:remoteCommand> 等。这就是我现在想重构它的原因。你能给我一些建议,让我知道我必须学习什么才能做到这一点吗?
    • 在使用 Servlet 的方法中,我意识到与 JSF 集成有多么困难。当我刚刚意识到<p:remoteCommand> 的全部功能时(与jsf.ajax.request() 相反,它允许您向ajax 响应添加回调参数),我使用它进行了更有效的重写。我的新解决方案无需隐藏输入即可工作,并利用了 JSF(使用 Primefaces)的所有优势。
    • 不客气。请注意,jsf.ajax.request() 肯定也支持将请求参数从客户端传递到服务器(注意:这些不被称为“回调参数”)。 OmniFaces <o:commandScript> 就是围绕它构建的。另见showcase.omnifaces.org/components/commandScript 及其源代码code.google.com/p/omnifaces/source/browse/src/org/omnifaces/… 关于回调参数(将JS 变量从服务器发送到客户端),请在PrimeFaces 中使用RequestContext#addCallbackParam() 或在OmniFaces 中使用Ajax#data()
    猜你喜欢
    • 2013-03-11
    • 2011-09-05
    • 1970-01-01
    • 2018-09-14
    • 1970-01-01
    • 1970-01-01
    • 2016-06-01
    • 1970-01-01
    相关资源
    最近更新 更多