从 Javascript 调用 Wicket 6 代码并返回值答案

【问题标题】：Call Wicket 6 Code from Javascript and return value从 Javascript 调用 Wicket 6 代码并返回值
【发布时间】：2018-04-12 05:59:29
【问题描述】：

在此示例中，我已设法使用选项 A 从 Javascript 调用我的 Wicket 6 Java 代码：https://stackoverflow.com/a/42612027/1047418

但是，我一直无法找到将数据从 Java 端返回到 JavaScript 的示例（生成的 JavaScript 回调函数甚至不包含 return 语句）。如何实现？

编辑：我不想在 Java 中设置属性，正如我已经解释过的，从 JavaScript 调用 Wicket 不是问题所在。我正在尝试根据 Ajax 请求将一个 JSON 对象从 Wicket 返回到浏览器。

Edit2：按照 martin-g 的示例，我拼凑了这个工作示例...

Java

public class MyAjaxBehaviour extends AbstractDefaultAjaxBehavior {

    @Override
    protected void onComponentTag(ComponentTag tag) {
        super.onComponentTag(tag);
        tag.put("aprachatcallbackurl", getCallbackUrl());
    }

    @Override
    protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
        super.updateAjaxAttributes(attributes);
        attributes.setDataType("json");
        attributes.setWicketAjaxResponse(false);
    }

    @Override
    protected void respond(AjaxRequestTarget target) {
        getComponent().getRequestCycle().replaceAllRequestHandlers(
            new TextRequestHandler("application/json", "UTF-8", "{...JSON GOES HERE...}));
    }
}

JavaScript

var mySuccessCallback = function(param1, param2, data, statusText) {
    // Data contains the parsed JSON object from MyAjaxBehaviour.respond(...)
    ...
}

var myFailureCallback = function() {
    ...
}

Wicket.Ajax.get({
    "u": callbackUrl,
    "dt": "json",
    "wr": false,
    "sh": [mySuccessCallback],
    "fh": [myFailureCallback]
});

Wicket 7 Reference 错误地指示在 JavaScript 调用中使用“wr”而不是“dt”的主要问题。 :)

【问题讨论】：

RobAu，反过来。我需要将一个 JSON 对象从 Wicket 返回到浏览器，作为对 Ajax 请求的响应。
您需要从 (Wicket) 应用程序请求返回一些 JSON 数据的 url？你可以创建并挂载一个Resource 然后链接到它？

标签： javascript java wicket wicket-6

【解决方案1】：

我认为你可以用更简单的方式来做到这一点！

Wicket Ajax API 只是：Wicket.Ajax.ajax({...})。您需要在服务器端准备的只是保存回调 url，例如通过将其全局保存在 window 对象或 HTML 元素的属性 (data-the-url) 中。

public class CallFromJavascriptBehavior extends AbstractDefaultAjaxBehavior {
   @Override
   protected void respond(AjaxRequestTarget target) {
      final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName");
      System.out.println(String.format("Hello %s", parameterValue.toString()));

      // write anything to the WebResponse and then consume it in the JS success handler. See below
   }

   @Override
   public void onComponenntTag(ComponenntTag tag, Component component) {
       super.onComponenntTag(tag, component);
       tag.put("data-the-url", getCallbackUrl());
   }
}

然后在你的 JS 代码中你可以这样做：

var callbackUrl = jQuery("#theElementId").data("the-url");
Wicket.Ajax.get({"u": callbackUrl, "sh":[successHandler], "fh": [failureHandler] });

其中successHandler 和failureHandler 是内联定义的JS 函数（例如function(...) {}）或其他地方。

您可以在以下位置找到更多文档： https://ci.apache.org/projects/wicket/guide/7.x/single.html#_ajax_request_attributes_and_call_listeners

带有完整示例的博客文章http://wicketinaction.com/2012/07/wicket-6-javascript-improvements/

【讨论】：

您能否详细说明“向 WebResponse 写入任何内容”部分？我尝试在 Wicket.Ajax.get 参数和 updateAjaxAttributes(...) 方法中将 Ajax 数据类型设置为“json”，但发送的是“{...json...}" 导致解析错误。
等等，我明白了。检票口指南有错误。当正确的是“dt”时，它会说“使用参数'wr'作为数据类型”...ci.apache.org/projects/wicket/guide/7.x/…

【解决方案2】：

您可以编写一个资源并挂载它，然后使用您最喜欢的 Ajax 方法获取它。

例如：

public class MyResource extends AbstractResource
    @Override
    protected ResourceResponse newResourceResponse( Attributes attributes )
    {

        ResourceResponse resourceResponse = new ResourceResponse();
        resourceResponse.setContentType( "text/json" );
        resourceResponse.setTextEncoding( "utf-8" );

        HttpServletRequest request = (HttpServletRequest) attributes.getRequest().getContainerRequest();

        try
        {
            this.json = IOUtils.toString( request.getInputStream() );
        }
        catch ( IOException e )
        {
            e.printStackTrace();
        }

        resourceResponse.setWriteCallback( new WriteCallback()
        {
            @Override
            public void writeData( Attributes attributes ) throws IOException
            {
                OutputStream outputStream = attributes.getResponse().getOutputStream();
                Writer writer = new OutputStreamWriter( outputStream );


                writer.write( MyResource.this.json );
                writer.close();
            }
        } );

        return resourceResponse;
    }

（从我这里的其他答案https://stackoverflow.com/a/17876029/461499复制）

并在此处安装它： https://dzone.com/articles/how-implement-rss-feeds-custom

【讨论】：