为什么这样而不是'简单'的方式？

Question

我需要将这些值传递给头部的javascript函数。问题是当从DB中提取一些不止一个单词时，使用href它会在使用javascript：function（vars）传递时在空格处将其切断，并且我无法使用onclick工作。我已经在变量周围尝试了各种引号和括号组合（＆＃34;＆＃34;，＆＃39;＆＃39;，＆＃34;和{）以及引号我认识的人在通过之前会有不止一个字（见下文）。这是PHP：

<?php
    require('config/dbconfig.php');
    $query = "SELECT * FROM news ORDER BY id DESC LIMIT 4";
    if ($stmt = $mysqli->prepare($query)) {
        /* execute statement */
        $stmt->execute();

        /* bind result variables */
        $stmt->bind_result($idn, $titlen, $categoryn, $descn, $postdaten, $authorn);

        /* fetch values */
        while ($stmt->fetch()) {
            //echo 'id: '. $id .' title: '. $title;
            echo "<table border='0'>";
            $shortDescLengthn = strlen($descn);
            if ($shortDescLengthn > 106) {
                $sDCutn = 106 - $shortDescLengthn;
                $shortDescn = substr($descn, 0, $sDCutn);
            } else {
                $shortDescn = $descn;
            }
                        $titlenQuote = "'". $titlen ."'";
                        $descnQuote = "'". $descn ."'";
                        $authornQuote = "'". $authorn ."'";
            echo "
                <h1>". $titlen ."</h1>
                <tr><td>". $shortDescn ."...</td></tr>
                <tr><td><a href='javascript:return false;' onclick='readMore(". $idn .",". $titlenQuote .",". $categoryn .",
                            ". $descnQuote .",". $postdaten .",". $authornQuote .")'>Read More</a></td></tr>
                <tr><td>Written by: " . $authorn . "</td></tr>
                <tr><td><img src='images/hardcore-games-newsbar-border.png' width='470px' /></td></tr>
            ";
        }
        echo "</table><br />";

        /* close statement */
        $stmt->close();
    }

    /* close connection */
    $mysqli->close();
?>

它所涉及的功能：

<script type="text/javascript">
    function readMore(id,title,cat,desc,post,auth) {
        alert(id +","+ title +","+ cat +","+ desc +","+ post +","+ auth);
        var $dialog = $('<div></div>').html('This dialog will show every time!').dialog({autoOpen: false,title: 'Basic Dialog'});
        $dialog.dialog('open');
        $dialog.title = title;
        $dialog.html(desc);
    }
</script>

这是在主索引页面中使用load（）的页面。我也有对话问题，但它还没有达到这一点，所以下一步。如果需要知道，所有jquery包含在主索引页面上。 load（）进入索引页面上的div，到目前为止工作正常。

Answer 1

您对属性值分隔符和JavaScript字符串分隔符使用相同类型的引用;不要那样做。另外，json_encode值而不是仅仅用引号括起来，如下所示：

echo "
    <h1>". $titlen ."</h1>
    <tr><td>". $shortDescn ."...</td></tr>
    <tr><td><a href='javascript:return false;' onclick='readMore(". $idn .",". json_encode($titlen) .",". json_encode($categoryn) .",
    ". json_encode($descn) .",". json_encode($postdaten) .",". json_encode($authorn) .")'>Read More</a></td></tr>
    <tr><td>Written by: " . $authorn . "</td></tr>
    <tr><td><img src='images/hardcore-games-newsbar-border.png' width='470px' /></td></tr>
";

...而且你也想对它们进行HTML编码。

echo "<h1>$titlen</h1>";
echo "<tr><td>$shortDescn...</td></tr>";
echo '<tr><td><a href="javascript:return false;" onclick="'
    . 'readMore(' . $idn . ',' . htmlspecialchars(json_encode($titlen)) . ','
    . htmlspecialchars(json_encode($categoryn)) . ','
    . htmlspecialchars(json_encode($descn)) . ',' . htmlspecialchars(json_encode($postdaten)) . ','
    . htmlspecialchars(json_encode($authorn)) . ')">Read More</a></td></tr>';
echo "<tr><td>Written by: $authorn</td></tr>";
echo '<tr><td><img src="images/hardcore-games-newsbar-border.png" width="470px" /></td></tr>';

ProTip™：<tr>不能直接在<h1>之后。

Answer 2

你现在正在做这样的事情：

echo "<a href='#' onclick='doSomething('" . $someData . "');'>...";

正如您所指出的，这不起作用，因为引号冲突。有一种快速的方法可以解决这个问题，但我认为如果你再改变它会更好。

首先，首先将数据放在属性中：

echo "<a ... data-title=\"" . htmlspecialchars($title) . "\" ...>...";

请注意我在放入title之前是如何逃避data-的。你可以添加更多这样的属性，但是你应该从class开始。

接下来，对其应用read-more。例如，echo "<a ... class=\"read-more\" data-title=\"" . htmlspecialchars($title) . "\" ...>...";。

div

现在您可以将事件侦听器绑定到它。假设所有项目都包含在id items $("#items").on("click", ".read-more", function(e) { var me = $(this); var title = me.attr('data-title'); alert("The title is:\n" + title); e.preventDefault(); });中。然后，您可以在JavaScript中执行此操作：

table

然后你可以扩展它以弹出一个对话框或你想做的任何事情。

为什么这样而不是'简单'的方式？

这种方式是分离内容，演示和行为的开始，这通常被认为是一件好事。以前，您有{{1}}的布局和演示文稿，混合了内联JavaScript以及行为的内容;一大堆东西。

将这一切分开可以帮助维护，如果将常见内容放入单独的文件并由浏览器缓存，则通常可以带来更好的加载时间。如果它是一个大汤，浏览器不能单独缓存碎片。

Answer 3

<html>
<head>
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
function login(t) {
alert(t);
}
</SCRIPT>
</head>
<body>
<?php
$id=$_GET['id'];
print "<input type='button' name='button' value='button' onClick=login('$id')>";
?>
</body>
</html>

使用引号将PHP变量传递给javascript函数

3 个答案:

为什么这样而不是'简单'的方式？