Question

我在http://communitychessclub.com有一个报价生成器。我希望用户能够点击报价并加载另一个随机报价而不刷新整个页面。我怎么能这样做？

<h3>

<?php $randomThings = file('quotes.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); 
echo $randomThings[mt_rand(0,count($randomThings)-1)];?>

</h3>

我尝试了下面的colin shoens建议：

<div id="new-projects"></div>
<script>
$( "#new-projects" ).load( "quotes.txt" );
</script>

但它加载了所有307个引号而不是一个随机引用。

http://communitychessclub.com/test.php

我该如何解决这个问题？

Answer 1

您提到您有超过300个引号，因此客户端页面上的内联JS引号数组可能效率不高。这是使用jQuery和PHP的快速解决方案：

PHP - quotes.php

<?php 
    // This is your original PHP code, mostly
    $randomThings = file('quotes.txt', FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); 
    echo $randomThings[mt_rand(0,count($randomThings)-1)];
?>

HTML方面

<H3 id="new-projects"></H3>
<script>
    $( "#new-projects" ).on("click", function(){
       $(this).load( "quotes.php" );
    });
</script>

Answer 2

您需要使用代表异步JavaScript和XML的AJAX。您可以使用jQuery库来减少异步加载新内容所需的代码量。看看jQuery文档：

https://api.jquery.com/load/

Answer 3

更敏感的方法是在用户打开页面时加载整个文件，并将这些行放在一个数组中。然后你可以使用JavaScript来改变基于该数组的div，你永远不必刷新页面甚至用AJAX联系服务器。

onClick使用“quotes.txt”中的随机文本行刷新div

3 个答案: