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

jQuery: handling mixed html/js ajax response

本文关键字：js ajax 响应 html 处理 混合 jQuery      更新时间：2023-09-26
在

混合 html/js ajax 响应中访问 javascript 代码时遇到问题。 jQuery ajax doc 指出：

如果指定了 html，则检索到的任何嵌入式 JavaScript 在 HTML 作为字符串返回之前执行数据

我可以通过在 html 回复中添加一个简单的片段来确认：

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

那么如何保留对 js 代码的访问权限与一次性执行？尝试实现模式登录（以防止在表单提交屏幕中的会话超时时丢失数据）。当然，我需要能够访问 ajax'd js 代码，然后验证电子邮件/密码字段，并验证远程服务器上的 ajax 身份验证用户凭据。

这是模式登录咖啡脚本片段：

# 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"live"处理程序怎么样？不幸的是，这种情况并不像人们希望的那样简单;-）我已经将$.getScript视为一种选择，但宁愿不要将 html 与 js 分开，因为服务器端已经组装了 html + js，并且原始的 ajax 调用一次性将其全部拉下来。（即避免创建专用的服务器端控制器来发回 js 文件内容包）

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

无论如何，想法赞赏！ 客户端既非常简单又...非常复杂;-）

好吧，抵御名副其实的大量回应，我会自己试一试。

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

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

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

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

然后，由于父窗口包含大部分所需的 javascript，唯一的要求是创建一个 js 文件，将模式登录表单按钮单击事件绑定到验证和 $.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()

完成，一切都很好，有效;-）

相关文章：