3

我目前正在使用此代码：

var wordRandomizer = {
    run: function (targetElem) {
        var markup = this.createMarkup();
        targetElem.appendChild(markup);
    },
    createMarkup: function () {
        var that = this;
        var frag = document.createDocumentFragment();
        this.elem = document.createElement('span');
        var button = document.createElement('button');
        button.innerText = 'Change Item';
        button.addEventListener('click', function () {
            that.changeItem();
        });
        frag.appendChild(this.elem);
        frag.appendChild(button);
        return frag;
    },
    changeItem: function () {
        var rand = this.getRandInt(1, this.items.length) - 1;
        console.log(rand);
        this.elem.innerText = this.items[rand];
    },
    getRandInt: function (min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    items: ['itemA', 'itemB', 'itemC', 'itemD']
};
wordRandomizer.run(document.body);

我的代码是一个按钮，当按下它时会抓取列表中的一个项目。但是，我不希望项目显示在与生成器相同的页面上，因为人们只是查看源代码。我怎样才能做到这一点，一旦按下按钮，它就会从另一个位置抓取随机项目，人们无法使用源代码查看它们。

如果有帮助，您可以在此处查看实际代码 - http://jsbin.com/ESOdELU/1/edit

4

1 回答 1

0

我会给你一个使用 PHP 的解决方案，因为它是一种免费的脚本语言，并且最有可能被主机或默认 Web 服务器支持......

对于初学者，这里是包含 jquery 和基本 AJAX 脚本的代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/JavaScript"> 
$(document).ready(function(){ 
  $("#generate").click(function(){ 
    $("#madlibs p").load("script.php");
  }); 
}); 
</script>

这是script.php的代码

<?php 
header("Cache-Control: no-cache"); 
// For testing you can use an inline array like the lines below
// Just remove the comment slashes "//" from the beginning of the line
// and comment out the external declarations

//$actors = array('Denzel Washington','Michael J. Fox','Jim Carey','Boris Kodjoe'); 
//$roles = array('Mental Patient','Homeless Musician','Drag Queen Detective','Tormented Mathematician');

// In production, you would put these in a text file or a database.
// For $actors, put an entry on each line of a text file and save it as 'leads.txt'  
// Do the same with a separate file for $roles (roles.txt). 
$actors = file("leads.txt");
$roles = file("roles.txt");

// This selects a random element of each array on the fly 
echo $prefixes[rand(0,count($actors)-1)] . " stars as a "  
   . $suffixes[rand(0,count($roles)-1)] . " in the next blockbuster film."; 
// Example output: 
// Michael J. Fox stars as a Tormented Mathematician in the next blockbuster film.
?>

将它放在页面的正文中，并确保对所有内容进行样式化以供显示。

<body>
    <div id="madlibs"><p> </p></div> 
    <button id="generate">Surprise Me!</button> 
</body>

一些注意事项： - 您可以在 script.php 文件中包含您的基本布局 HTML，然后只需要您将在其中显示结果的 DIV 的 ID $("#madlibs")

  • 您可以使用任何服务器端语言来实现相同的结果，只需将外部文件调用换成适当的名称和扩展名（.asp、.cfm 等）

这是一个帮助我完成类似项目的原始教程的链接： http ://www.sitepoint.com/ajax-jquery/

我希望这有帮助。抱歉，我无法在午餐时想出一个纯 Java 的 JavaScript 解决方案。

于 2013-11-07T18:48:19.937 回答