Elixir Phoenix框架：在JSON响应中发送呈现模板

我在

top_navigation.html

中有一个应用程序顶部导航的模板，其中包含“登录”、“注册”以及登录时的“注销”链接

还有Javascript：

$(".js-login").on("click", e => {
  e.preventDefault()
  $(".js-login-alert").hide()
})
$("#login").on("submit", e => {
  e.preventDefault()

  let form = $("#login")
  let data = { _csrf_token: $( 'input[name="_csrf_token"]' ).val(), 
               user:        { email:    form.find('input[name="email"]'   ).val(), 
                              password: form.find('input[name="password"]').val() } }

  $.ajax({
    type: "POST",
    url: "/login",
    data: data,
    success: e => {
      $(".js-top-navigation").html(e.responseJSON["top_navigation"])
      // ^^^^^^^^^^^^^^ This is where we swap it out ^^^^^^^^^^^^^^^
      $(".js-login-modal").modal("toggle")
    },
    error: e => {
      let alert = $(".js-login-alert")
      alert.text(e.responseJSON["message"])
      alert.show()
    }
  })
})

---

非常感谢

是的！Phoenix模板只是其视图模块上的函数。因此，您可以通过调用函数来呈现模板：

|> json(%{nav: Phoenix.View.render_to_string(MyView, "nav.html", conn: conn)})

---

这会让你接触到这里提到的XSS吗？

$(".js-login").on("click", e => {
  e.preventDefault()
  $(".js-login-alert").hide()
})
$("#login").on("submit", e => {
  e.preventDefault()

  let form = $("#login")
  let data = { _csrf_token: $( 'input[name="_csrf_token"]' ).val(), 
               user:        { email:    form.find('input[name="email"]'   ).val(), 
                              password: form.find('input[name="password"]').val() } }

  $.ajax({
    type: "POST",
    url: "/login",
    data: data,
    success: e => {
      $(".js-top-navigation").html(e.responseJSON["top_navigation"])
      // ^^^^^^^^^^^^^^ This is where we swap it out ^^^^^^^^^^^^^^^
      $(".js-login-modal").modal("toggle")
    },
    error: e => {
      let alert = $(".js-login-alert")
      alert.text(e.responseJSON["message"])
      alert.show()
    }
  })
})

|> json(%{nav: Phoenix.View.render_to_string(MyView, "nav.html", conn: conn)})