2010-05-17 83 views
0

我正在製作一個網頁,它將允許用戶輸入和查看不同日期的數據,並更改日期,有兩個按鈕,其中一個將顯示前一天,以及一個將在第二天顯示。我知道我可以通過提交表單並在每次按下其中一個按鈕時重新加載頁面來做到這一點,但我寧願使用javascript,也不必提交表單,但我有麻煩讓它工作。目前,我有兩個按鈕,並保存日期在PHP變量,如下圖所示我的代碼:不同日期的數據

<script> 
function init() { 
    <? $nutrDate = $this->parseDate(date('m/d/Y')); ?> 
} 
function nutrPrevDay() {  
    <? $nutrDate = mktime(0, 0, 0, date('m',$nutrDate), date('d',$nutrDate)-1, date('Y',$nutrDate)); ?> 
    alert("<? echo(date("m/d/y", $nutrDate)) ?>"); 
} 
function nutrNextDay() { 
    <? $nutrDate = mktime(0, 0, 0, date('m',$nutrDate), date('d',$nutrDate)+1, date('Y',$nutrDate)); ?> 
} 
window.onload = init; 
</script> 

<p style="text-align:center; font-size:14px; color:#03F"> 
    <button onclick="nutrPrevDay()" style="width:200px" >< Show Previous Day</button>     
    <? echo(date('m/d/Y', $nutrDate)) ?>   
    <button onclick="nutrNextDay()" style="width:200px">Show Next Day ></button> 
</p> 

我在nutrPrevDay警報()僅作爲調試。發生什麼事情是,當我點擊按鈕時,警報顯示日期正確地減少(例如從5月17日到5月16日),但只有一天減少,而不是每一次點擊一天。此外,我不知道如何使頁面上的文本(由行創建)更改爲單擊按鈕後顯示新日期。

所以,這裏是我的問題: 1)是否有可能在頁面上使用JavaScript動態更改數據(例如文本和將來的SQL查詢),而不必在點擊按鈕時重新加載頁面? 2)如果可能,我如何進行這些更改? 3)我怎樣才能解決這個問題,以便每次單擊按鈕時都會通過日期遞增和遞減?

回答

2

Q1:

是的,這是可能的,AJAX可能是你在找什麼。

Q2:

嗯,首先你要學習的是JavaScript的工作在客戶端,而PHP工作在服務器端。考慮到這一點,你不能指望當你點擊一個按鈕時執行php腳本,只是因爲你在javascript函數中編寫了它們。

您可以做的最多的事情是從PHP腳本中打印一些內容到JavaScript腳本中。除了警報部分,你的腳本在這方面失敗了。例如:

<script> 
function javascriptFunction(){ 
    // This php script, will be executed when you call your page, however $nutrDate is an assigned php variable, javascript will never know about it; 
    <?php $foo = 'bar'; ?> 
    // This will give you a javascript error because $foo is a string 
    var foo = <?php echo $foo; ?>; 
    // This is the code which will do the expected, notice the quotes. 
    var foo = '<?php echo $foo; ?>'; 

    // If you have a single quote inside $foo, it will break javascript 
    <?php $foo = "ba'r"; 
    var foo = '<?php echo $foo; ?>'; 
} 
</script> 

Q3:

的想法是讓每一個你的按鈕單擊事件被觸發時一個AJAX請求......這等於說,當你點擊一個按鈕,你調用一個javascript函數,如果請求成功,它將向其他頁面發出請求並從中獲取一些信息。在這裏,例如:

<script> 
var current = <? echo time(); ?>; 
function requestSomething(action){ 
    if (window.XMLHttpRequest) { 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     // readyState info: http://www.devguru.com/technologies/xmldom/quickref/httpRequest_readyState.html 
     if (xmlhttp.readyState==4 && xmlhttp.status==200){ 
     // this is where we tell where the result will appear 
     document.getElementById("current").innerHTML=xmlhttp.responseText; 
     current = xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("GET","somescript.php?action="+action+'&curday='+current,true); 
    xmlhttp.send(); 
} 
</script> 

<p style="text-align:center; font-size:14px; color:#03F"> 
    <button onclick="requestSomething('decrease')" style="width:200px" >< Show Previous Day</button> 
    <!-- this is where the result will appear --> 
    <span id="current"></span> 
    <button onclick="requestSomething('increase')" style="width:200px">Show Next Day ></button> 
</p> 

現在,在您的somescript.php文件,

<?php 
    if(isset($_GET['action'])){ 
    if($_GET['action'] == 'increase'){ 
     // your increasing day logic here 
    } elseif ($_GET['action'] == 'decrease'){ 
     // decreasing logic here 
    } else { 
     // whatever... 
    } 
    } 
    ?> 

注意:這幾乎是從無到有,從這裏有一些複製/過去寫的,並沒有檢查代碼是否實際工作...這只是一個指導方針...

希望它有幫助。

+0

謝謝你,我不熟悉AJAX,但它看起來像它正是我需要的。 – nsw1475 2010-05-17 17:40:00

0

你不需要Ajax。使用Javascript無法完成的功能很少 - 只有當您需要與服務器通信(例如:需要數據庫中的某些內容等)時,您應該只使用Ajax。即使你可以使用Ajax稍後你不應該在任何地方使用它,尤其是當一個簡單的腳本可能能夠解決您的問題。

由於恰巧JavaScript有許多內置日期函數的每一點一樣強大的PHP的....如果他們不這樣做,你需要開箱你可以很容易地編寫自己的。

http://www.w3schools.com/jsref/jsref_obj_date.asp

保持簡單。