[英]How run JavaScript with PHP variables
我正在嘗試使用PHP變量運行JavaScript代碼。
在HTML中可以。 腳本將運行,並且子頁面已加載到內容(div)中。
但是,當我嘗試使用PHP變量運行腳本時,它僅顯示一個子頁面。
原始腳本:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#ex").click(function(event){
$("#content").load('example.html');
return false;
});
});
</script>
使用PHP:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#"<?php $link[1] ?>).click(function(event) {
$("#content").load('<?php $link[0] ?>');
return false;
});
});
</script>
哪里
<?php
$links = array(
$link = array('example.html', 'ex', 'Example')
);
foreach ($links as $value => $link)
{
echo '<li><a href=subpage/' . $link[0].id=' . $link[1] . '>' . $link[2] . '</a><li>';
}
更新:
當我僅使用JavaScript和HTML https://drive.google.com/file/d/0B1WsoN01_VlbQ3lWczZrbnh0TnM/view
當我使用PHP變量和鏈接數組https://drive.google.com/file/d/0B1WsoN01_Vlbc2VjVUVrWldIZ1U/view
將代碼更改為此:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#" + <?php echo $link[1] ?>).click(function(event){
$("#content").load('<?php echo $link[0] ?>');
return false;
});
});
</script>
您在此處未正確定義數組。
$links = Array(
$link = array('example.html', 'ex', 'Example')
);
我認為單個陣列足以滿足這種情況。 做-
$links = array('example.html', 'ex', 'Example');
然后這應該工作-
$("#content").load('<?php echo $links[0] ?>');
更新
PHP-
echo '<li><a href=subpage/'.$link[0].' id='.$link[1].' class="ex-links">'.$link[2].'</a><li>';
js-
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('ex-links').click(function(event){
event.preventDefault();
$("#content").load($(this).attr('href'));
return false;
});
});
</script>
嘗試改用它
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(<?php echo '"#' . $link[1]'"'; ?>).click(function(event){
$("#content").load(<?php echo "'" . $link[0]."'"; ?>);
return false;
});
});
</script>
請查看是否繼續。
將代碼更改為此:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#<?php echo $link[1]; ?>").click(function(event){
$("#content").load('<?php echo $link[0] ?>');
return false;
});
});
</script>
看到我也修復了第一個PHP回聲中的引號。
PHP代碼包含錯誤,而且還產生了混淆超鏈接的屬性(href和ID),jQuery選擇的混合起來的,另外我很不解,為什么a
標簽應包含兩個鏈接href屬性和onclick事件上的load事件。
這就引出了一個問題:您是否沒有檢查輸出,或者您是否不熟悉語法應如何?
您在這里所做的相對復雜性,以及輸出中明顯的眾多錯誤,建議您確實應該首先學習正確的語法並在調試器(瀏覽器開發人員工具)中檢查輸出,這是一個建議。
以下對我來說很好用。 我假設您不嘗試在div元素中加載完整的HTML頁面。 href屬性也可以為空或href =“#”,因為它沒有任何作用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<?php
$links = Array(
$link = array('content.txt', 'ex', 'Example')
);
foreach ($links as $value => $link)
{
echo "<li><a href='{$link[0]}' id='{$link[1]}'>{$link[2]}</a></li>";
}
?>
<script type="text/javascript">
$(document).ready(function(){
$("#<?php echo $link[1] ?>").click(function(event){
$("#content").load('<?php echo $link[0] ?>');
return false;
});
});
</script>
<div id="content"></div>
</body>
</html>
想要在JavaScript中添加PHP的最好方法是按照示例將所有PHP信息堆疊在一個數組中,然后將json_encode堆疊到一個樣機HTML元素中。
重要提示:請勿在$phpInfo
添加敏感信息,因為#hold-php-data
將在developerTools下可見,直到加載JavaScript代碼並將jQuery刪除它為止。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <?php $phpInfo = array(); $links = array( array('example.html', 'ex', 'Example'), array('example.html', 'ex', 'Example-2'), ); // Add $links to $phpInfo if (!isset($phpInfo['links'])){ $phpInfo['links'] = array(); } $phpInfo['links'] = $links; // Now we have $links in our "global" variable ?> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script id="hold-php-data" data-php='<?php echo json_encode($phpInfo); ?>'></script> <script> $(function() { var mockupElement = $('#hold-php-data'); // Get the JSON data from attribute and convert it to a valid object var phpInfo = JSON.parse(mockupElement.attr('data-php') || []); // We can safely remove the mockupElement since we have the // data so it won't be exposed to the user later on. mockupElement.remove(); // Now you can access the links as phpInfo.links console.log('data from PHP', phpInfo); }); </script> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.