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

我正在做一个网站，我需要一个随机输出。我有一个使用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>

来源

2016-11-20 Skiletro

你的要求生成应该在一个按钮点击生成..就是这样...！ –

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(); 
 
}

<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>

此外，你还可以额外的onLoad调用它。

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

来源

2016-11-20 16:16:14

只是包装在一个函数的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>

见：

来源

2016-11-20 16:18:22 martinarroyo

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

回答

相关问题