POST 请求在 Yesod 中没有刷新页面

Question

任务是创建一个带有漂亮错误处理的注册表单。
我是 Yesod 的新手，所以我找到的唯一方法是：

regForm :: Form User

getRegRExtra extraFormWidget = do
  (formWidget, enctype) <- case extraFormWidget of
                             Nothing -> generateFormPost regForm
                             Just val -> return val
  defaultLayout $ $(widgetFile "reg/reg")

getRegR = getRegRExtra Nothing

postRegR = do
  ((result, widget), enctype) <- runFormPostNoToken regForm 
  case result of
    FormSuccess person -> undefined
    _ -> getRegRExtra (Just (widget, enctype))

但是有一个问题：每次提交时页面都会刷新，而我希望它动态地执行此操作。
我知道它可以在 Ajax 或 Jquery、
的帮助下修复但我将失去使用 Yesod POST 功能时获得的所有好处。
有什么标准的方法可以解决这个问题吗？

Answer 1

解决方法是：

-- Used for returning plain html as AJAX response.
noLayout :: Widget -> Handler Html
noLayout widget = do
  pc <- widgetToPageContent widget
  withUrlRenderer [hamlet| ^{pageBody pc} |]

-- Replace a default event handler with the AJAX one.
getRegR :: Handler Html
getRegR = do
  ((res, formWidget), enctype) <- runFormPost regForm
  defaultLayout $ do
    $(widgetFile "reg/reg")
    addScriptRemote "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"
    toWidget [julius|
      $(document).on('click', '.btn-important', function(e) {
        e.preventDefault();
        e.stopPropagation();
        $.ajax({
          type: 'POST',
          url:'@{RegR}',
          cache: false,
          dataType: 'html',
          data:$('#form-reg').serialize(),
          success: function(data) { $('#form-reg').html(data); }
        });
      }); |]

postRegR :: Handler Html
postRegR = do
  ((result, widget), enctype) <- runFormPostNoToken regForm
  noLayout widget

POST 请求在 Yesod 中没有刷新页面

POST request with no page refreshing in Yesod

ajax

post

yesod

page-refresh

yesod-forms