Question

我正在创建一个网页，允许用户输入和查看不同日期的数据，并更改日期，有两个按钮，其中一个将显示前一天，另一个将显示第二天。我知道我可以通过提交表单并在每次按下其中一个按钮时重新加载页面来实现这一点，但我宁愿使用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）如何解决这个问题，以便每次点击一个按钮时它会递增和递减日期？

Answer 1

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

问题3：

这个想法是每次触发按钮点击事件时发出一个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...
    }
  }
  ?>

注意：这几乎是从头开始写的，并且从这里到那里都有一些复制/过去，并没有检查代码是否真的有用......这只是一个指导...

希望它有所帮助。

Answer 2

你不需要Ajax。使用PHP无法用Javascript做的事情很少 - 当绝对需要与服务器通信时，你应该只使用Ajax（例如：需要来自数据库的东西等等）。）。即使您稍后使用Ajax，也不应该在任何地方使用它，尤其是当一个简单的脚本可以解决您的问题时。

正如它所发生的那样Javascript有许多内置的日期函数，它们都像PHP一样强大......如果它们没有你需要的开箱即用，你可以轻松编写自己的日期函数。

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

保持简单。

不同日期的不同数据

2 个答案: