0

我想创建一个日历，我可以在其中选择我的实践何时打开/关闭。该日历用作每周的标准方案。例如http://www.restaurantterpolder.be/wachtkamer/vast.php

标准做法总是关闭，除非您单击单元格。然后将其写入数据库：tbl_open(ID, Weekday, Moment_ID, Doctor_ID)。因为这是一个每周计划，所以我使用“工作日”而不是“日期”。

更改底部单元格时，每次重新加载后页面都会跳起来，这很烦人。所以我想我可以使用 Ajax 重新加载单元格。

如果我没记错的话，我需要： - 调用脚本的页面上的事件 -> onClick=getInfo(this.id);。单击超链接时应该调用它。- 可以从 xml 文件中获取内容的 js 文件 - 从 js 文件调用的 php 文件 1）保存数据 2）加载新日期 3）创建 xml 文件

到目前为止我是对的吗？

我尝试这样开始：

<a onClick="getInfo(this.id);" id="tbl_close_id"><img ... /></a>

阿贾克斯

var xmlHttp

//gegevens verzamelen om de juiste info uit de database te kunnen halen
function showInfo(str)
{ 
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
{
         alert ("Browser does not support HTTP Request")
return
}

var url="responsexml_calendar.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

//info is uit de database gehaald en wordt nu in het formulier geplaatst
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{ 
        xmlDoc = xmlHttp.responseXML;
        document.getElementById("class").value = xmlDoc.getElementsByTagName("class")[0].childNodes[0].nodeValue;
        document.getElementById("link").value = xmlDoc.getElementsByTagName("link")[0].childNodes[0].nodeValue;
}
}

function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
    objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
    objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

我检查当天练习是否打开或关闭的 PHP 文件： 

//SAVE OR DELETE DATA IN DATABASE FIRST (still need to code this)

header('Content-Type: text/xml');
header("Cache-Control: no-cache, must-revalidate");

$query = 'SELECT ID
    FROM tbl_open
    WHERE ID = '.$q.'

$result = mysql_query($query) or die('foutmelding query ajax');

if (mysql_num_rows($result) > 0)
{
    $class = 'class = "normal"';
    $link = '<a onClick="getInfo(this.id);" id="tbl_close_id"><img ... /></a><img src="./img/edit.png" /></a>'. PHP_EOL;
}
else
{
    $class = 'class="unavailable"';
    $link = '<a onClick="getInfo(this.id);" id="tbl_close_id"><img ... /></a><img src="./img/edit.png" /></a>'. PHP_EOL;
}

echo '<?xml version="1.0" encoding="ISO-8859-1"?>
<info>';
    echo "<class>" .$class. "</class>";
    echo "<link>" .$link. "</link>";
echo "</info>";
?>
4

1 回答 1

1

首先我要说的是我推荐使用 jQuery Javascript 库。使用 jQuery，一切都变得更容易和更短：

http://jquery.com/

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

jQuery 中的 ajax 请求如下所示

$.ajax({
  url: 'responsexml_calendar.php',
  dataType: 'json',
  success: function(data) {

    alert(data.class+' ' + data.link);
  }
});

语法有点奇怪，但是学了就会有投资回报。

您不需要整个 GetXmlHttpObject 的东西。一切都由 jQuery 管理，您无需在不同的浏览器中处理不同的实现。jQuery 是跨浏览器兼容的。

我在这里选择了数据类型“json”。Json 比 xml 简单。你应该使用 json （更少的开销）

http://de.wikipedia.org/wiki/JavaScript_Object_Notation

一个 json 对象如下所示：

{'class':'someclass','link':'somelink'}

你用过：

document.getElementById("class").value = "yourvalue";

使用 jQuery，它看起来像这样：

$('#class').val("yourvalue");

更容易和更短。

于 2012-11-23T21:48:51.313 回答