如何在网站的 HTML 页面中正确显示 javascript 对象属性

Question

我设法获得了一个包含消息长度（存储在 MYSQL 数据库中）的某个 PHP 变量 ($length) 以传递给 javascript 变量 (var = length)，以便让 javascript 决定是否不在 HTML 页面上显示某个选取框。目前的 javascript 代码（非常感谢 Polywhirl 先生）基本上可以正常工作，它使用 document.write 语句来显示输出。但是，使用 document-write “杀死”我目前的 HTML 页面。所以我试图找到一个替代方案，通过定义一个额外的函数，使用innerHTML。但是我无法让这段代码工作......

最初的 javascipt 代码可以正常工作，但它会“杀死”我的 HTML 页面，如下所示：

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">

var length = 0;

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: "https://www.transitum.org/linski_nach/check3.php",
    dataType: "json",
    data: { length: length },
    success: function(data, textStatus, jqXHR) {
      console.log(data); // 53
      if (textStatus === "success" && jqXHR.readyState === 4) {
        length = JSON.parse(data); // Set the global variable
        if(length <1)
        {
            document.write(length);            
            document.write("<table><td>no message available</td></table>");
        }
        else
        {
            document.write(length);
            document.write('<iframe src="https://www.transitum.org/linski_nach/test3.php" width="100%" height="55" border="no" scrolling="no"></iframe>');
        }
        } else {
        // Do nothing...
      }
    }
  });
});
</script>

所以我做了一些更改，以使输出正确显示在我的 HTML 页面中，并保持这个 HTML 页面完整，而不是完全“替换”我的 HTML 页面。这段代码如下：

<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">

var length = 0;
var message = 0

$(document).ready(function() {
  $.ajax({
    type: "POST",
    url: "https://www.transitum.org/linski_nach/check3.php",
    dataType: "json",
    data: { length: length },
    success: function(data, textStatus, jqXHR) {
      console.log(data); // 53
      if (textStatus === "success" && jqXHR.readyState === 4) {
        length = JSON.parse(data); // Set the global variable
        if(length <1)
        { var message = { item:"<iframe src='https://www.bruedergrimmschule.de/linski_nach/test3.php' width='100%' height='55' </iframe>" };
        }
        else
        { var message = { item:"<table><td>no message available</td></table>" };
        }
        } else {
        // Do nothing...
      }
    }
  });
});

function displayDetails() {
document.getElementById("details").innerHTML = this.item;
}
message.showDetails = displayDetails;
message.showDetails();

</script>

<div id="details"></div>

这一次 HTML 页面本身已完全正确显示，但根本看不到 javascript 代码的输出。

如何解决？

Answer 1

将变量message 变成$.ajax 方法的success 属性并删除var message 条件内的var message 声明

var length = 0;
var message = 0
$(document).ready(function() {
$.ajax({
    // type: "POST",
        type: "GET",
    // url: "https://www.transitum.org/linski_nach/check3.php",
        url: "https://api.myjson.com/bins/ta9cn",
    // dataType: "json",
    data: { length: length },
    success: function(data, textStatus, jqXHR) {
      console.log(data); // 53
      if (textStatus === "success" && jqXHR.readyState === 4) {
        length = JSON.parse(data); // Set the global variable
        if (length < 1) { 
                    message = { item:"<iframe src='https://www.bruedergrimmschule.de/linski_nach/test3.php' width='100%' height='55' </iframe>" };
        } else { 
                    message = { item:"<table><td>no message available</td></table>" };
        }
                message.showDetails = displayDetails;
                message.showDetails();
      } else {
        // Do nothing...
      }
    }
  });
    function displayDetails() {
        document.getElementById("details").innerHTML = this.item;
    }

});

在此示例中，我更改了 url 以检查代码功能。 您可以在此处查看示例：https://codepen.io/dsb/pen/NWKjowO

Answer 2

在 javascript 中使用全局变量甚至更多变量是一种非常糟糕的做法，因为它是异步的。所以，给定，

$.ajax({
    type: "POST",
    url: "https://www.transitum.org/linski_nach/check3.php",
    dataType: "json",
    data: { length: length },
    success: function(data, textStatus, jqXHR) {
      // ...
    }
});

和

function displayDetails() {
    document.getElementById("details").innerHTML = this.item;
}
message.showDetails = displayDetails;
message.showDetails();

JS引擎会触发AJAX调用，但同时会在新线程中执行第二段代码，导致代码看不到效果，因为在调用showDetails()时，变量item是可能未定义（因为 AJAX 调用速度较慢或尚未完成）

您的代码的解决方法是直接在 if 块内执行更改。但要考虑到先创建 HTML 元素。例如：

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>

    <body>
        <div id="details">

        </div>

        <!-- JS code -->
        <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="..."/>
    </body>
</html>

我的 JS 代码会是这样的：

$(document).ready(function(){
    $.ajax({
        type: "POST",
        url: "https://www.transitum.org/linski_nach/check3.php",
        dataType: "json",
        data: { length: length },
        success: function(data, textStatus, jqXHR) {
          if (textStatus === "success" && jqXHR.readyState === 4) {
             length = JSON.parse(data);
             $("#details").html("<iframe src='https://www.bruedergrimmschule.de/linski_nach/test3.php' width='100%' height='55' </iframe>")
          } else {
             $("#details").html("<table><td>no message available</td></table>")
          }
        }
    });
});

希望对您有所帮助，如果您遇到任何问题，请告诉我。

PD：我强烈建议您使用适当的框架，例如 Angular，并使用订阅者等良好实践。学习曲线有些复杂，但您会很快掌握它的概念。那里有一个伟大而庞大的社区！