ajax - Yesod中没有页面刷新的POST请求

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