0
我有一個網站建立了一系列頁面和腳本，我試圖用Ajax將它們連接在一起。我被告知發送回服務器的最簡單方法是使用jQuery，所以我正在嘗試，但我似乎無法使其工作。我的三個文件是如下，有問題的方法是含onclick()的線條和文件3
這裏了MySQL查詢的網頁本身：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Penelope, Upgraded</title>
<script type="text/javascript" src="jLaser.js"/>
<script type="text/javascript" src="jquery.js"/>
<?php
require_once 'mysqlSheep.php';
require_once 'background.php';
$hour = date("G");
$hour = mysql_real_escape_string($hour);
mysql_query("INSERT INTO time(hour) VALUES (".$hour.")
ON DUPLICATE KEY UPDATE hits = hits+1")
or die ("MySQL Error: ".mysql_error());
?>
</head>
<body id="<?php echo day() == 1 ? 'day' : 'night'; ?>">
<button type="button"
onclick="laser(); $.post('sheepDB.php', { vic: victim, num: numVics });">
Activate Her Powers!
</button>
<div id="lasertext"></div>
<p>Want to see how many things Queen Penelope <a href="http://www.queenofsheep.com/Sheep/victimlist.php">has decimated?</a></p>
</body>
</html>
下面是一個包含我的該系列的.js腳本由onclick()第一調用的函數：
/*
* Initialize laserState to 0
* i.e. the laser is off.
*/
var laserState = 0;
var numVics;
/*
* Function: laser
* Called from button on jSheep.php
*
* If the laser is on, i.e. laserState = 0,
* it calls laserOn(). Otherwise, it calls laserOff().
*
* @call laserOff() if laserState == 1
* @call laserOn() if laserState == 0
*/
function laser()
{
laserState ? laserOff() : laserOn();
}
/*
* Function: laserOff
* Called from function laser()
*
* Turns off the laser.
* Sets laserState to 0,
* prints a message about the laser being off,
* and switches the image to the sheep minus the laser.
*/
function laserOff()
{
laserState = 0;
if (document.getElementById("vartext"))
{
var textdiv = document.getElementById("lasertext");
var para = document.getElementById("vartext");
textdiv.removeChild(para);
}
if (document.getElementById("nightlaser"))
{
var body = document.getElementById("nightlaser");
body.setAttribute('id', 'night');
}
if (document.getElementById("daylaser"))
{
body = document.getElementById("daylaser");
body.setAttribute('id', 'day');
}
textdiv = document.getElementById("lasertext");
para = document.createElement("p");
var text = document.createTextNode("Queen Penelope has deactivated her lasers.");
para.setAttribute("id", "vartext");
para.appendChild(text);
textdiv.appendChild(para);
}
/*
* Function: laserOn
* Called from function laser()
*
* Turns on the laser
* Sets laserState to 1,
* removes the text about the laser being off,
* calls function selectVictim
* and uses the returned value to call function zapVictim.
*
* @call selectVictim()
* @call zapVictims()
*/
function laserOn()
{
laserState = 1;
if (document.getElementById("vartext"))
{
var textdiv = document.getElementById("lasertext");
var para = document.getElementById("vartext");
textdiv.removeChild(para);
}
if (document.getElementById("night"))
{
var body = document.getElementById("night");
body.setAttribute('id', 'nightlaser');
}
if (document.getElementById("day"))
{
body = document.getElementById("day");
body.setAttribute('id', 'daylaser');
}
return selectVictim(function(victim) {zapVictims(victim);});
}
/*
* Function: selectVictim
* Called from function laserOn()
*
* Selects a random victim from a list of victims
*
* @return String: victim
*/
function selectVictim(callback)
{
var vicString;
var vicArray;
var vicID;
var params = "url=queenofsheep.com/Sheep/victims.php";
var request = new ajaxRequest();
request.open("POST", "victims.php", true);
request.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
request.setRequestHeader("Content-Length", params.length);
request.setRequestHeader("Connection", "close");
request.send(params);
request.onreadystatechange = function()
{
if (this.readyState == 4)
{
if (this.status == 200)
{
if (this.responseText != null)
{
vicString = this.responseText;
vicArray = JSON.parse(vicString);
vicID = Math.floor(Math.random() * (vicArray.length - 1));
if(callback)
{
callback(vicArray[vicID]);
}
}
else alert("Ajax error: No data received");
}
else alert("Ajax Error: " + this.statusText);
}
}
}
/*
* Function: zapVictims
* Called from function laserOn()
*
* @Arg String: victim
*
* Given the identifier of a victim,
* generates a pseudorandom number of victims
* to be zapped with the laser.
* Then, it passes this number and the victim string
* to a PHP script that updates the database values.
*/
function zapVictims(victim)
{
numVics = Math.floor(Math.random() * 100) + 1;
var textdiv = document.getElementById("lasertext");
var para = document.createElement("p");
var text = document.createTextNode("Queen Penelope has dissolved " + numVics + " " + victim + "!");
para.setAttribute("id", "vartext");
para.appendChild(text);
textdiv.appendChild(para);
}
/*
* Function: ajaxRequest
* Called whenever external data is needed
*
* Tried to create a new XMLHttpRequest object
* If it can't, attempts to correct for IE.
* Finally, if it still can't, returns false.
* Otherwise, it returns the created object.
*
* @return Boolean false
* @return Object XMLHttpRequest
* @return Object ActiveXObject
*/
function ajaxRequest()
{
try
{
var request = new XMLHttpRequest();
}
catch(e1)
{
try
{
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e2)
{
try
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e3)
{
return false;
}
}
}
return request;
}
最後，該腳本應該接收POST數據：
<?php
require_once 'mysqlSheep.php';
$numVics = mysql_real_escape_string($_POST["numVics"]);
$vic = mysql_real_escape_string($_POST["vic"]);
mysql_query("
UPDATE victims
SET amount=amount+".$numVIcs."
WHERE victim='".$vic."'"
);
？>
我在哪裏出錯了？ Javascript文件（包含在頁面中）的變量不可用於onclick？除了第三個文件中的MySQL update以外，一切正常。
在第二個文件中，我該如何使用jQuery？我不能將庫包含在JS文件中，對嗎？ – Andy 2010-08-27 16:05:07
@Andrew，首先包括jQuery庫，它應該工作 – riwalk 2010-08-27 19:11:57