-2
我需要創建一個動態生成的窗口,其中顯示從數據庫中獲取的圖像和各種元素。彈出窗口工作,但它沒有得到我想要使用onclick函數的「id」。Popup w/jquery&Database
使用控制檯我收到以下消息:XMLHttpRequest無法加載getProduct.php?id = undefined。 Access-Control-Allow-Origin不允許Origin null。我不知道該怎麼做,進一步定義「id」。
HTML & JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function() {
onClickRegister = function(){
var id = $(this).attr('id');
b = $("#blanket");
b.css("display","block");
b.css("position","fixed");
b.css("width", window.innerWidth);
b.css("height", window.innerHeight);
b.css("background-color", "rgba(0, 0, 0, 0.7)");
f=$("#openImg");
f.css("position", "fixed");
f.css("top", "10%");
f.css("left", "10%");
$.getJSON("getProduct.php?id="+id,function(data){
var img = data.data.prodImg;
var name = data.data.prodName;
var price = data.data.prodPrice;
var description = data.data.prodDesc;
var qty = data.data.prodQty;
$("#openImg").html("<p style='float:right; margin: 0; padding: 0;'><a href='#' id='close' onClick='onClickClose();'>[X]</a></p><br /><img src='"+img+"' width='544' height='512' /><br />Name: "+name+"<br />Price: "+price+"<br />Qty: "+qty+"<br />Description: "+description)
});
};
window.onresize = function() {
if ($("#blanket").length > 0) {
b.css("width", window.innerWidth);
b.css("height", window.innerHeight);
}
};
});
</script>
</head><body>
<div id="body"><div id="wrapper">
<a href="#" onclick="onClickRegister()" id="1"><img src="images/plug1_s.jpg" width="200" height="200" /></a>
<a href="#" onclick="onClickRegister()" id="2"><img src="images/plug2_s.jpg" width="200" height="200" /></a>
<a href="#" onclick="onClickRegister()" id="3"><img src="images/plug3_s.jpg" width="200" height="200" /></a>
<a href="#" onclick="onClickRegister()" id="4"><img src="images/plug4_s.jpg" width="200" height="200" /></a>
<a href="#" onclick="onClickRegister()" id="5"><img src="images/plug5_s.jpg" width="200" height="200" /></a>
<a href="#" onclick="onClickRegister()" id="6"><img src="images/plug6_s.jpg" width="200" height="200" /></a>
<div id="blanket"><div id="openImg">
</div></div>
<script type="text/javascript">
function onClickClose(){
$("#blanket").hide();
}
</script></div></div>
</body></html>
PHP:
// retval: 0 - login ok, 1 - login failed, 2 - internal error
$json = array("retval" => 2, "data" => NULL, "debug" => "");
$id=json_decode($_REQUEST['id']);
$sql="SELECT * FROM prodTB WHERE prodId=" . $id;
$json['debug'] .= "SQL query was: ".$sql."\n";
$result=mysql_query($sql);
if (!$result) {
$json['debug'] .= "SQL query failed\n";
$json['debug'] .= "Other output: ". ob_get_contents();
ob_end_clean();
die(json_encode($json));
}
$count=mysql_num_rows($result);
if($count==1){
$json['retval'] = 0;
$json['data'] = mysql_fetch_assoc($result);
} else {
$json['retval'] = 1;
}
$json['debug'] .= "Other output: ". ob_get_contents();
ob_end_clean();
echo json_encode($json);
數據庫表結構:
CREATE TABLE `prodTB` (
`prodId` int(11) NOT NULL,
`prodImg` varchar(80) COLLATE utf8_unicode_ci NOT NULL,
`prodName` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
`prodPrice` decimal(10,2) NOT NULL,
`prodDesc` longtext COLLATE utf8_unicode_ci NOT NULL,
`prodQty` int(11) NOT NULL,
PRIMARY KEY (`prodId`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
請不要使用'mysql_ *'函數編寫新代碼。他們不再被維護,並且社區已經開始[棄用流程](http://goo.gl/q0gwD)。請參閱 [紅盒子](http://goo.gl/OWwr2)?相反,您應該瞭解[準備好的 聲明](http://goo.gl/orrj0)並使用[PDO](http://goo.gl/TD3xh)或[MySQLi](http://in3.php達網絡/ mysqli的)。如果你不能決定哪些,[這篇文章](http://goo.gl/YXyWL)會幫助你。 如果你選擇PDO,[這裏是很好的教程](http://goo.gl/b2ATO)。 另請參閱[爲什麼不應該在PHP中使用mysql函數?](http://goo.gl/J5jAo) –
如果您使用jQuery,我建議使用jQuery UI對話框http://jqueryui.com/dialog /對你來說這很容易,可能。您可以輕鬆地在窗口之間傳遞變量,因爲它們實際上並不是窗口,而是在同一窗口中的DIV。 – user1477388
@Phawkes你有沒有嘗試在''href =「#」onclick =「onClickRegister(this)」''裏面傳遞'this'。看起來你不能正確地獲取ID。 –