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 ."!";
?>

现在是主文件,它使用ajax更新并显示玩家的类和种族($clas,$race),在使用capitalizeFL以下内容大写首字母后:

主文件包括以下内容:

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

我想要发生的是,html from statuswindow.php将在主窗口的#topMenudiv中正确显示.

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

Answer 1

页面加载后无法使用document.write.它的作用是打开一个新文档,用新内容替换你所拥有的文件.

在这个例子中,甚至不需要使用document.write.只需使用脚本标签即可.jQuery将为您处理脚本标记.

你真的应该跳过使用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");