2017-03-15 18 views
0

現在,我有一個HTML表單,代碼如下所示。它有一個按鈕,在每次用戶更改信息時,該按鈕將打開一個新選項卡(URL)並更新PHP頁面上的信息。現在,PHP頁面顯示在另一臺設備上,並且包含更新的信息,因爲我使用.txt並將其放在同一臺服務器上。現在的問題是更新後的信息僅在頁面刷新結束時顯示,這是不是我想要的你可以把刷新和更新js腳本在相同的功能?

我的問題是,現在,我的js函數充盈和更新變量我也包括在它的刷新功能以及

目標:?按鈕更新,並刷新在同一時間的URL(PHP頁面),以便最終用戶不必刷新它在他們的一端,刷新在同一臺服務器上的URL。

我嘗試使用loc到那裏,但它似乎沒有正在工作。

HTML:

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
\t \t \t <script language="javascript" type="text/javascript"> 
 
\t \t \t function dynamicdropdown(listindex) { 
 
\t \t \t document.getElementById('senator').className = listindex; 
 
\t \t \t } 
 
\t \t \t </script> 
 
\t \t \t 
 
\t \t \t <style> 
 
\t \t \t optgroup { 
 
\t \t \t display: none; 
 
\t \t \t } 
 

 
\t \t \t select.agriculture 
 
\t \t \t optgroup.agriculture, 
 
\t \t \t select.appropriations 
 
\t \t \t optgroup.appropriations 
 
\t \t \t { 
 
\t \t \t display: block; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t div#header{ 
 
\t \t \t padding: 1px; 
 
\t \t \t color: yellow; 
 
\t \t \t padding-left: 9px; 
 
\t \t \t background-color: #000080; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .category_div{ 
 
\t \t \t padding: 3px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .sub_category_div{ 
 
\t \t \t padding: 3px; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t .microphone{ 
 
\t \t \t padding: 3px; 
 
\t \t \t } 
 

 
\t \t \t .body{ 
 
\t \t \t padding-right: 5px; 
 
\t \t \t } \t 
 
\t \t \t </style> 
 
\t </head> 
 
\t 
 
<body> 
 

 
\t <div class="header" id="header"> 
 
\t <h1>Indiana State Senate IT</h1> 
 
\t </div> 
 

 
\t <div class="room130"> 
 
\t <h3>Room 130</h3> 
 
\t <form target="Room 130" action = "test.php" method="POST"> 
 
\t \t <div class="category_div" id="category_div">Committee: 
 
\t \t \t <select id="committee" name="committee" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);"> 
 
\t \t \t \t <option value="">Select Committee</option> 
 
\t \t \t \t <option value="agriculture">AGRICULTURE</option> 
 
\t \t \t \t <option value="appropriations">APPROPRIATIONS</option> 
 
\t \t \t </select> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="sub_category_div" id="sub_category_div"> 
 
\t \t Individual: 
 
\t \t \t <select name="senator" id="senator"> 
 
\t \t \t \t <option value="">Select individual</option> 
 
\t \t \t \t \t <optgroup class="agriculture"> 
 
\t \t \t \t \t \t <option value="THE CHAIR">THE CHAIR</option> 
 
\t \t \t \t \t \t <option value="THE PRESENTER">THE PRESENTER</option> 
 
\t \t \t \t \t </optgroup> 
 
\t \t \t </select> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="microphone" id="microphone">Microphone: 
 
\t \t \t <select id="microphone" name = "microphone"> 
 
\t \t \t \t <option value=" "> </option> 
 
\t \t \t \t <option value="ON">ON</option> 
 
\t \t \t \t <option value="OFF">OFF</option> 
 
\t \t \t </select> 
 
\t \t </div> 
 
\t \t \t <button onclick="refresh()">Refresh</button> 
 
\t \t \t <button onclick="updateData()">Update</button> 
 
\t \t 
 
\t \t </form> 
 
\t </div>

PHP代碼:

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
\t <title>Room 130</title> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
 
<script type="text/javascript"> 
 
\t $(document).ready(function() { 
 
\t $('#java').delay("90000").fadeOut(); 
 
\t \t }); 
 
\t \t 
 
\t \t function updateData() { 
 
\t \t \t $.getJSON("sr.iga.local/data.txt", 
 
\t \t \t \t function(data) { 
 
\t \t \t \t \t var senator = data[0]; 
 
\t \t \t \t \t var microphone = data[1]; 
 
\t \t \t \t \t $("#java").text("Please remind " + senator + " to make sure their microphone is " + microphone + ". Thank you.");} 
 
\t \t \t \t function(data){ 
 
\t \t \t \t window.location.reload(true); }); 
 
\t \t } 
 
</script> 
 
<style> 
 
\t body { 
 
\t \t \t background-color: #000080; 
 
\t \t \t color: white; 
 
\t \t \t font-size: 72px; 
 
\t \t \t display: flex; 
 
\t \t \t flex-direction: column; 
 
\t \t \t justify-content: center; 
 
\t \t \t align-items: center; 
 
\t \t \t height: 100%; 
 
\t \t \t font-weight: bold; 
 
\t } 
 
\t 
 
\t .java { 
 
\t \t width: 90%; 
 
\t \t margin: 200px; 
 
\t \t padding-top: 100px; 
 
\t \t text-align: center; 
 
\t } 
 
</style> 
 
</head> 
 
<body> 
 

 
<div class="java" id="java"> 
 

 
\t <?php 
 
\t session_start(); 
 
\t 
 
\t if(isset($_POST["senator"]) && isset($_POST["microphone"])) { // If the page receives POST data, it needs to be stored 
 
    $senator = $_POST["senator"]; 
 
    $microphone = $_POST["microphone"]; 
 
    $data = json_encode(Array($senator, $microphone)); // Put values into an array and encode it for storage 
 
    file_put_contents('data.txt', $data); // Put the JSON-encoded array into a text file. This function replaces the contents of the text file, which is exactly what is needed in this application. To append instead of replacing the contents, you need a FILE_APPEND flag. 
 
\t } else { // If there's no POST data, the values are retrieved from the storage 
 
    $data = json_decode(file_get_contents('data.txt')); // Retrieve the contents of the text file and decode them back into an array 
 
    $senator = $data[0]; 
 
    $microphone = $data[1]; 
 
\t } 
 
\t echo "Please remind ". $senator. " to make sure their microphone is " .$microphone. ". Thank you."; 
 
\t 
 
\t 
 
\t ?> 
 
</div> 
 
</body> 
 
</html>

回答

0

如果你經常POST的頁面將自動更新。我不明白這裏有什麼問題。

+0

它不會更新服務器上的內容。它只會更新當前機器上打開的url。我需要它在相同的服務器上更新相同的URL,以便我的其他設備打開PHP網址也會更新。 –