Question

我正在建立一个我需要随机输出的网站。我有一个使用Javascript的工作解决方案，但目前输出改变的唯一方法是重新加载页面。有没有什么办法可以重新加载输出而无需重新加载页面（最好是使用按钮）？我目前的代码：

    <DOCTYPE html>
    <html>
        <head>
            <title>Strat Roulette - R6S Edition</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <link rel="stylesheet" href="strats.css">
            <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
var request = new XMLHttpRequest();
request.onload = function() {
    // get the file contents
    var fileContent = this.responseText;
    // split into lines
    var fileContentLines = fileContent.split( '\n' );
    // get a random index (line number)
    var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
    // extract the value
    var randomLine = fileContentLines[ randomLineIndex ];

    // add the random line in a div
    document.getElementById( 'strats-output' ).innerHTML = randomLine;
};
request.open( 'GET', 'strats.txt', true );
request.send();
</script>
        </head>

        <body>
            <div id="content">
                <div class="textshadow">
                    <h1>Strat Roulette</h1>
                    <h2>Rainbow 6 Siege Edition</h2>
                </div>
                <div id="strat">
                        <code><div id="strats-output"></div></code>
                </div>
                <button type="button" class="btn btn-primary" onClick="window.location.reload()">Gimme New Strat</button>
                </div>
            </body>

            <footer style="clear: both;">
            <p class="alignleft">&#169; Skiletro <?php echo date("Y"); ?></p> <p class="alignright"><a href="./strats.txt">strats.txt</a></p>
            </footer>
</html>

Answer 1

＆＃13;

function sendRequest(){
  var request = new XMLHttpRequest();
request.onload = function() {
    // get the file contents
    var fileContent = this.responseText;
    // split into lines
    var fileContentLines = fileContent.split( '\n' );
    // get a random index (line number)
    var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
    // extract the value
    var randomLine = fileContentLines[ randomLineIndex ];

    // add the random line in a div
    document.getElementById( 'strats-output' ).innerHTML = randomLine;
};
request.open( 'GET', 'strats.txt', true );
request.send();
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
            <link rel="stylesheet" href="strats.css">
            <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
</script>
            <div id="content">
                <div class="textshadow">
                  
     <button onclick="sendRequest()">REFRESH CONTENT</button>
                    <h1>Strat Roulette</h1>
                    <h2>Rainbow 6 Siege Edition</h2>
                </div>
                <div id="strat">
                        <code><div id="strats-output"></div></code>
                </div>
                <button type="button" class="btn btn-primary" onClick="window.location.reload()">Gimme New Strat</button>
                </div>
            </body>

            <footer style="clear: both;">
            <p class="alignleft">&#169; Skiletro <?php echo date("Y"); ?></p> <p class="alignright"><a href="./strats.txt">strats.txt</a></p>
            </footer>

＆＃13;

此外，您还可以在onLoad上另外调用它。

只需将请求事物添加到函数中，然后在按钮单击时调用它。

Answer 2

只需将AJAX代码包装在一个函数中，并在按下按钮时调用该函数：

function reloadData(){
    var request = new XMLHttpRequest();
    request.onload = function() {
      // get the file contents
      var fileContent = this.responseText;
      // split into lines
      var fileContentLines = fileContent.split( '\n' );
      // get a random index (line number)
      var randomLineIndex = Math.floor( Math.random() * fileContentLines.length );
      // extract the value
      var randomLine = fileContentLines[ randomLineIndex ];

      // add the random line in a div
      document.getElementById( 'strats-output' ).innerHTML = randomLine;
  };
  request.open( 'GET', 'strats.txt', true );
  request.send();
  }

然后

<button type="button" class="btn btn-primary" onClick="reloadData()">Gimme New Strat</button>

请参阅codepen：

使用按钮刷新输出而不是重新加载页面

2 个答案: