javascript - 尽管返回了其他数据，但未设置 Ajax 成功变量

Question

编辑:基本问题是相同的，但我现在传递回 getButtons() 函数，而不是传回全局按钮数组。

我正在向服务器发出 AJAX 请求以获取数据来填充弹出框，并将数据作为 JSP 传回。 JSP 的一部分包括一个 JSON 对象，其中包含客户端用来绘制一些按钮的数据。

问题是有时 JSON 对象在成功回调中尚未准备好，因此不会绘制按钮。 JSP 的其余部分都在那里，因此辅助功能工作正常。

对于大多数页面来说，这确实可以完美地工作，但在某些页面上，内容准备得更快，按钮尚未设置。如何确保按钮被设置？

服务器代码:

//Arbitrary JSP code prior to this function

function getButtons() {
    var buttons = [];

    buttons.push(addButton('Send', 'functionName', buttonDescription));        
    buttons.push(addButton('Cancel', 'functionName', buttonDescription));

    return buttons;
}

客户端代码:

popupBoxFunction(action, params, global) {
 $.ajax({
    url: action,
    type: 'POST',
    data: params,
    dataType: 'html',
    global: global,
    success: function (data, textStatus, xhr) {

    $("#container").html(data);

    if (typeof getButtons() != "undefined") {
       var myButtons = generatePopupButton(getButtons());
       for (var i = 0; i < myButtons.length; i++) {
           //do something
       }

    }

//arbitrary rest of function
}

Answer 1

选项 - 1

如果您希望仅在所有按钮可用后才调用 generatePopupButton，为什么我们不在 getButtons 中调用它呢。这样您就不必检查按钮是否可用，并且一切都会依次发生。

您的 JSP:

<script>
// make it an IIFE so that it's executed right after parsing
(function() {
    var buttons = [];

    buttons.push(addButton('Send', 'functionName', buttonDescription));        
    buttons.push(addButton('Cancel', 'functionName', buttonDescription));

    var myButtons = generatePopupButton(buttons);
      for (var i = 0; i < myButtons.length; i++) {
           //do something
      }
})();
</script>

您的客户代码:-

popupBoxFunction(action, params, global) {
    $.ajax({
       url: action,
       type: 'POST',
       data: params,
       dataType: 'html',
       global: global,
       success: function (data, textStatus, xhr) {
          /* just add your html and script to DOM
           and wait for the browser to execute it for you */
          $("#container").html(data);
       }
    });

   //arbitrary rest of function
}

选项 - 2

如果您不喜欢将 generatePopupButton 和其他脚本代码移动到 JSP 中，您可以利用 Function Body As a String 技术在大多数模板引擎中。

在您的 JSP 中:-

<!-- make sure type is not text/javascript, something gibberish that 
     is not known to browser -->
  <script id="template" type="my-type">

     var buttons = [];
     buttons.push(addButton('Send', 'functionName', buttonDescription));        
     buttons.push(addButton('Cancel', 'functionName', buttonDescription));
     return buttons;

  </script>

确保浏览器无法识别script类型。如果您愿意，您甚至可以将 script 标记更改为 div 标记:)

在您的客户端代码中:-

     $.ajax({
           url: action,
           type: 'POST',
           data: params,
           dataType: 'html',
           global: global,
           success: function (data, textStatus, xhr) {
              $("#container").html(data);
              var funBody = $('#template').html();
              /* Now that we've function body as text  
                 retrieve that in code*/
              var fn = new Function(funBody);
              // Now that we've the function invoke it to get buttons
              var myButtons = generatePopupButton(fn());
              for (var i = 0; i < myButtons.length; i++) {
                //do something
              }
           }
        });

这是一个bin尝试第二种方法。

甚至还有其他方法可以做到这一点，但这两种只是我的想法:)