javascript - jQuery:处理混合 html/js ajax 响应

Question

在混合 html/js ajax 响应中访问 javascript 代码时遇到问题。 jQuery ajax 文档指出:

If html is specified, any embedded JavaScript inside the retrieved data is executed before the HTML is returned as a string

我可以通过在 html 回复中添加一个简单的代码片段来确认这一点:

<script type="text/javascript"> alert($(this)); </script>

那么如何保留对 js 代码的访问权与一劳永逸的执行？尝试实现模式登录(以防止表单提交屏幕中 session 超时时数据丢失)。当然，我需要能够访问 ajax 的 js 代码，然后验证电子邮件/密码字段并使用 ajax 验证远程服务器上的用户凭据。

这是模式登录 CoffeeScript 片段:

# submit form
$.ajax
  success: (data) -> ...
  error: (data) ->
    popAuth(data.responseText) if(data.status == 401)

popAuth = (title) -> 
  $.fancybox({
    href: "/login"
    ajax: { type: "GET" }
    title: title
  })

也许我可以向 popAuth() ajax 选项添加成功回调来存储返回的 js 代码？ jQuery“实时”处理程序怎么样？不幸的是，这种情况并不像人们希望的那么直接；-) 我已经看到 $.getScript 作为一种选择，但更愿意不将 html 与 js 分开，因为服务器端已经组装了 html + Node.js 和原始的 ajax 调用一次性将其全部拉下来。 (即避免创建专用的服务器端 Controller 来发回js文件内容包)

我当然愿意接受替代解决方案来解决此问题。例如，我可以将每个屏幕上的登录字段和 js 登录验证代码(JVM CRUD 应用程序位于 WordPress 前端后面，因此每个屏幕基本上都需要身份验证)存储在隐藏的 div 中，然后“本地”弹出模式登录窗口，这我认为可以解决远程 ajax 内容的烦人的一劳永逸的 js 执行。

无论如何，创意值得赞赏!客户端既非常简单又...非常复杂;-)

Answer 1

好吧，为了避免大量的回复，我自己也尝试一下。

据我现在的理解，由于混合 html/js 内容是一次性执行的，因此我们有一次机会捕获 ajax 响应 js 代码并将其绑定(bind)到当前范围。

首先，在原始ajax调用中(即返回潜在的401未授权状态的表单提交)将模式登录的ajax设置的上下文设置为$(this)，即包含jquery验证和其他共享js的当前执行范围模式登录 ajax 提交工作所需的代码。

就我而言，使用 fancybox，添加上下文参数，现在看起来像:

popAuth = (title) -> 
  $.fancybox({
    href: "/login"
    ajax: { type: "GET" }
    context: $(@)
    title: title
  })

然后，由于父窗口包含大部分所需的 javascript，因此唯一的要求是创建一个 js 文件，将模式登录表单按钮单击事件绑定(bind)到验证和 $.ajax 提交。

# login.coffee
jQuery ->
  $('#loginSubmit').click (e) ->
    e.preventDefault()
    isValid = $('#loginForm').validate().form()
    if isValid
      $('#spinner').show()
      $.ajax
        data: $('#loginForm').serialize()
        success: (data) ->
          $('#status').fadeOut()
          location.href = '/foo'
        error: (data) ->
          $('#status > div').html( data.responseText )
          $('#status').fadeIn()
        complete: () ->
          $('#spinner').hide()

完成，一切顺利，有效;-)