php - Javascript document.write 覆盖 php 页面

Question

我有这个 Javascript 函数:

function capitalizeFL(string) { //takes a string, returns it with first letter capitalized
    return string.charAt(0).toUpperCase() + string.slice(1);
}

名为 statuswindow.php 的文件，其中包括以下内容:

<?php
    $raceV = "<script>document.write(capitalizeFL(\"".$player->race."\"));</script>";
    $clasV = "<script>document.write(capitalizeFL(\"".$player->clas."\"));</script>";
    echo "You have chosen a " . $raceV. " " .$clasV ."!";
?>

现在是主文件，在使用 $clas 将他们的第一个字母大写后，它使用 ajax 来更新和显示玩家的职业和种族( $race 、 capitalizeFL )。 :

主文件包括以下内容:

$("button").click(function() {
  $("#topMenu").load("statuswindow.php");
});

我希望发生的是 statuswindow.php 中的 html将正确显示在主窗口的#topMenu中分区。

我假设问题是由 document.write 引起的覆盖整个页面。问题是，如何在不使用 document.write 的情况下执行以下操作？

Answer 1

页面加载后无法使用 document.write。它的作用是打开一个新文档并用新内容替换其中的内容。

在此示例中，甚至不需要使用 document.write。只需使用脚本标签即可。 jQuery will handle the script tags for you .

您确实应该跳过使用 load 并使用 $.get 或 $.getJSON 并自己处理响应。

让服务器返回一个 JSON 对象。

{
  raceV : "foo",
  clasV : "bar",
  outStr : "You have chosen a {1} {2}!"
}

JavaScript 将是

$.getJSON("statuswindow.php", function(data) {
    var outString = data.outStr;
    outString = outString.replace("{1}",capitalizeFL(raceV));
    outString = outString.replace("{2}",capitalizeFL(clasV));
    $("#topMenu").html(outString );
})

但是真正的问题是:

为什么不在 PHP 中完成所有这些操作。 JavaScript 没有理由这样做。

无需 JavaScript!

<?php
    $raceV = ucfirst($player->race);
    $clasV = ucfirst($player->clas);
    echo "You have chosen a " . $raceV. " " .$clasV ."!";
?>

并且 jQuery 负载是相同的

 $("#topMenu").load("statuswindow.php");