用按鈕刷新輸出，而不是重新加載頁面

我正在做一個網站，我需要一個隨機輸出。我有一個使用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

用按鈕刷新輸出，而不是重新加載頁面

回答

相關問題