Question

我想创建一个日历，我可以在f.e.我的做法是开放/关闭。此日历用作每周的标准方案。例如http://www.restaurantterpolder.be/wachtkamer/vast.php

标准练习总是关闭，除非您单击单元格。然后将其写入数据库：tbl_open（ID，Weekday，Moment_ID，Doctor_ID）。因为这是每周计划，所以我使用“工作日”代替“日期”。

当改变底部单元格时，每次重新加载后页面都会跳起来，这非常烦人。所以我认为我可以使用Ajax重新加载单元格。

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

到目前为止我是对的吗？

我试着这样开始：

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

Ajax

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>";
?>

Answer 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");

更容易，更短。

用ajax重新加载表中的单元格

1 个答案: