Question

我需要通过ajax发布表单数据，等待服务器回复然后使用window.location.replace（）替换当前页面，因为我不希望将当前页面保存在浏览器中历史。

以下是我迄今为止在JS中尝试过的内容：

function ajaxSubmit(formId, submitAnchorId, replaceWithPageUrlAnchorId) {
    var  postData = $("#" + formId).serializeArray(),
         url = $("#" + submitAnchorId)[0].href;
    var posting = $.post(url, postData);
    posting.done(function(data) {
      window.location.replace($("#" + replaceWithPageUrlAnchorId));      
    });
}

新页面网址必须来自服务器代码，它可能是对数据提交的回复的一部分，或者（就像我想象的那样）它可以在专用的href中设置事先将BookmarkablePageLink附加到它（在我的情况下）是“pageaftersubmit”）。

在我的PageWithForm.html中，我有：

  <form id="myform" method="post" style="display: none;" >
        <input type="text" id="domdiv0" name="domdiv0" value="" />
        <input type="text" id="domdiv1" name="domdiv1" value="" />
        <input type="text" id="domdiv2" name="domdiv2" value="" />
        <a href="#" id="formsubmitbutton" wicket:id="formsubmitbutton"/>
        <a href="#" id="pageaftersubmit" wicket:id="pageaftersubmit"/>
  </form>
  [...]
  <div onclick="ajaxSubmit('myform','formsubmitbutton','pageaftersubmit')" >

这是相关的服务器端代码：

public class PageWithForm extends WebPage {
[...]
    BookmarkablePageLink fsub = 
       new BookmarkablePageLink("formsubmitbutton", MyPage.class);
    BookmarkablePageLink fredirect = 
       new BookmarkablePageLink("pageaftersubmit", SomeOtherPage.class); 

[...]

public class MyPage extends WebPage  {
  public MyPage(PageParameters pp) {
  }
}

所有似乎都有效，但MyPage没有收到任何参数。现在我很确定必须有更简单的方法来完成我需要的东西，甚至可能使用简单的AjaxButton（or this），但我不知道如何阻止浏览器将当前页面放入历史记录中如果使用这些方法，则在替换当前位置之前等待服务器回复。

Answer 1

是的，您可以使用AjaxButton。

在PageWithForm上将您的两个链接替换为：

/*[...]*/
final AjaxButton submitLink = new AjaxButton ( "formSubmitButton", myForm )
{
    @Override
    protected void onSubmit ( final AjaxRequestTarget target, final Form<?> form )
    {
        /* [your post values will be stored at input fields models] */
        /*...*/            
        /* 
         * 'AjaxRequestTarget' object can execute js code, and you can
         * generate url for your wicket pages with 'urlFor' method.
         * Also, you can define page parameters according to submition info.
        */
        target.appendJavaScript ( 
            "window.location.replace('" + 
                urlFor ( SomeOtherPage.class, new PageParameters () ) + "')" );
    }
}
/*[...]*/

在HTML中，还会将您的链接替换为另一个input元素：

<form ... >
    <!--your inputs-->
    <input type="submit" wicket:id="formSubmitButton" value="Submit"/>
</form>

此外，您应该从标记中删除<div onclick=...元素。您的表单将通过添加按钮进行提交。

重要更新

我刚才意识到，你没有使用wicket组件来实现表单（这很奇怪）。因此，要获取参数，您应该在onSubmit方法中使用以下内容：

RequestCycle.get ().getRequest ().getPostParameters ().getParameterValue ( "domdiv0" );

但是你必须在java类中至少指定wicket Form组件以允许AjaxButton正常工作。

在您的页面中，只需添加：

/*[...]*/
Form myForm = new Form("myform");
/*create submitLink describe above*/
form.add ( submitLink );

add ( form );
/*[...]*/

在html中：

<form wicket:id="myform" style="display: none;">
    <!-- everyting else is same -->
</form>

现在我看到，您还想出于某种原因隐藏表单，因此我不应该删除<div onclick...>，现在您必须为{{1}定义id参数并使用：

formSubmitButton

但无论如何，我认为你应该read more关于检票口<div onclick="$('#formSubmitButtonId').click();">submition</div>以及如何实施它。

通过ajax发布到Wicket并替换当前位置

1 个答案: