Javascript document.write覆盖php页面


Javascript document.write overwriting a php page

我有这个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");
});

我希望statuswindow.php中的html能够正确地显示在主窗口的#topMenu分区中

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

页面加载后不能使用document.write。它所做的是打开一个新的文档,并用新的内容替换您所拥有的内容。

在本例中,甚至不需要使用document.write。只需使用script标记即可。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");
echo "You have chosen a ".ucFirst($player->race)...

更有意义

当你使用$.load时,你并不真的希望在你加载的页面中有任何脚本,在这种情况下,当php有一个内置的函数来实现这一点时,绝对没有理由让javascript的第一个字母大写

我认为问题是由于文档造成的。写入会覆盖整个页面。问题是,我如何在不使用document.write的情况下完成以下操作?

因为这正是document.write所做的。

尝试使用innerHTML:

例如,如果您想将内容添加到#topMenu,只需执行以下操作:

document.getElementById('topMenu').innerHTML += capitalizeFL(".$player->race.");