Question

我的模型中有一些数据，我想将它放入请求主体并通过POST请求发送。问题是我希望浏览器导航到请求URL，因为路由返回一个新的HTML页面。通常，这可以通过将数据放在表单中然后使用JS提交来完成。

我怎么能用榆树做到这一点？

Answer 1

修改 - 根据您的评论澄清更新

据我了解你的问题，你希望能够在幕后构建一个POST请求，但让浏览器发布它，以便浏览器被重定向到它发布的实际页面，让你的Elm应用程序落后。

您可以在Elm中构建表单但隐藏它，然后当您想要触发它时，将表单ID传递给执行表单提交的端口。

type alias Model =
    { foo : String }

view model =
    div []
        [ Html.form
            [ id "my-form"
            , action "https://requestb.in/1crya751"
            , method "POST"
            , style [ ( "display", "none" ) ]
            ]
            [ input [ type_ "text", name "foo", value model.foo ] []
            ]
        , div []
            [ button [ onClick SubmitForm ] [ text "Submit" ] ]
        ]

type Msg
    = SubmitForm

update msg model =
    case msg of
        SubmitForm ->
            model ! [ submitForm "my-form" ]

port submitForm : String -> Cmd msg

你的javascript看起来像这样（虽然在id不存在的情况下会有一些错误处理）：

var app = Elm.Main.fullscreen()
app.ports.submitForm.subscribe(function(formId) {
    document.getElementById(formId).submit();
});

这是working example of this on ellie-app.com。它会将表单发布到requestb.in，以便您查看已发布的内容by going here。

我推荐隐藏表单而不是尝试使用标准Http包的原因是因为听起来您希望将浏览器重定向到您要发布的任何形式。使用Http包时，你无法真正实现同样的目的。

动态创建并提交表单

1 个答案: