如何使脚本标签在div中工作？

Question

我正在建立网站上帖子的编辑功能，因此我正在使用jquery ajax和php作为在数据库内进行编辑的脚本文件。 问题是在返回脚本中，我有一个包含一些jquery的脚本标签，然后将返回的数据放在div内，但是该脚本标签正在打印，就好像它是文本一样。 有人可以帮我吗，让script标记充当实际的脚本，而不是将其打印为文本？

这是我的html div：

<div class="board_post_span" id="<?php echo $board_id."-".$board_user_id;?>-spanBoardEdit"><?php echo $board_post;?></div>

这是我的PHP脚本：

<?php 
require_once '../includes/session.php';
require_once '../includes/functions.php';
require_once '../includes/validation_functions.php';
require_once '../includes/create_thumbnail.php';

// this to prevent from accessing this file by pasting a link to it
if(!is_ajax_request()) {
    exit;
}

if(isset($_POST['board_id'], $_POST['board_textarea'])) {
    $board_id = (int)$_POST['board_id'];
    $board_textarea = mysql_prep($_POST['board_textarea']);

    // UPDATE table
    $query  = "UPDATE board_table ";
    $query .= "SET board_post = '$board_textarea' ";
    $query .= "WHERE board_id = $board_id";
    $result = mysqli_query($connection, $query);

    // now we select the updated board post
    $query2 = "SELECT * FROM board_table ";
    $query2 .= "WHERE board_id = $board_id ";
    $result2 = mysqli_query($connection, $query2);
    confirm_query($result2);
    $result_array = mysqli_fetch_assoc($result2);


}
    ?>

    <?php
        echo $result_array['board_post'];
    ?>


    <script>
        // This takes care of the board Continue Reading feature ---------------------------------------------------------
        $(".board_post_span").each(function(){
            var boardPostText = $(this).text();
            var boardPostLength = boardPostText.length;
            var boardIdAttribute1 = $(this).attr("id");
            var boardIdAttributeArray1 = boardIdAttribute1.split("-");
            var boardPostId = boardIdAttributeArray1[0];
            var boardPostUserId = boardIdAttributeArray1[1];

            if(boardPostLength > 250) {
                var boardPostTextCut = boardPostText.substr(0, 250);
                $(this).text(boardPostTextCut+"...");
                $("#"+boardPostId+"-continueReading").remove();
                $(this).after('<a href="board_comment.php?user_id='+boardPostUserId+'&board_id='+boardPostId+'" class="board_continue_reading" target="_blank" id="'+boardPostId+'-continueReading">Continue Reading</a>');

            } else {
                $(this).text(boardPostText);
            }

        });
    </script>

这是我的jquery和ajax：

$.ajax({
    url: url_edit_board, 
    method: "POST",
    data: {
        board_id: saveBoardButtonId,
        board_textarea: editBoardTextareaVal
    },
    beforeSend: function() {
        CustomSending("Sending...");
    },
    success: function(data){
        $("#sending_box").fadeOut("Slow");
        $("#dialogoverlay").fadeOut("Slow");

        // this makes the scroll feature comes back
        $("body").css("overflow", "scroll");

        console.log(data);
        $("#"+saveBoardButtonId+"-"+editBoardButtonUserId+"-spanBoardEdit").html(data);
        $("#"+saveBoardButtonId+"-formBoardEdit").hide();
        $("#"+saveBoardButtonId+"-"+editBoardButtonUserId+"-spanBoardEdit").show();
    }
});

Answer 1

原因是您将boardPostText设置为整个DIV的文本，其中包括DIV中的<script>标记。 您应该将要缩写的文本放在另一个跨度内，然后进行处理。

所以改变：

echo $result_array["board_post"];

至：

echo "<span class='board_post_text'>" . $result_array["board_post"] . "</span>";

然后，您可以在JavaScript中返回：

    $(".board_post_text").each(function(){
        var boardPostText = $(this).text();
        var boardPostLength = boardPostText.length;
        var boardIdAttribute1 = $(this).attr("id");
        var boardIdAttributeArray1 = boardIdAttribute1.split("-");
        var boardPostId = boardIdAttributeArray1[0];
        var boardPostUserId = boardIdAttributeArray1[1];

        if(boardPostLength > 250) {
            var boardPostTextCut = boardPostText.substr(0, 250);
            $(this).text(boardPostTextCut+"...");
            $("#"+boardPostId+"-continueReading").remove();
            $(this).after('<a href="board_comment.php?user_id='+boardPostUserId+'&board_id='+boardPostId+'" class="board_continue_reading" target="_blank" id="'+boardPostId+'-continueReading">Continue Reading</a>');

        } else {
            $(this).text(boardPostText);
        }

    });

Answer 2

首先，似乎您不需要else部分：

 else {
     $(this).text(boardPostText);
 }

然后，在执行任何操作之前，请确保您从PHP文件返回的数据未以某种方式被加密。 如果<变为< 那么文本永远不会被视为JS代码。

您可以创建一个脚本标签，然后将JS脚本作为函数放入其中，然后在注入后立即调用它。

用以下代码替换PHP文件中的脚本：

<script>
var scriptText = `function editPost() {
    $(".board_post_span").each(function(){
        var boardPostText = $(this).text();
        var boardPostLength = boardPostText.length;
        var boardIdAttribute1 = $(this).attr("id");
        var boardIdAttributeArray1 = boardIdAttribute1.split("-");
        var boardPostId = boardIdAttributeArray1[0];
        var boardPostUserId = boardIdAttributeArray1[1];

        if (boardPostLength > 250) {
            var boardPostTextCut = boardPostText.substr(0, 250);
            $(this).text(boardPostTextCut+"...");
            $("#"+boardPostId+"-continueReading").remove();
            $(this).after('<a href="board_comment.php? 
 user_id='+boardPostUserId+'&board_id='+boardPostId+'" class="board_continue_reading" target="_blank" id="'+boardPostId+'-continueReading">Continue Reading</a>');
        }
    });
}`
</script>

然后将您的js文件更改为：

$.ajax({
    // ...
    success: function(data) {
        // ...

        var container = $("#"+saveBoardButtonId+"-"+editBoardButtonUserId+"-spanBoardEdit")
        container.html(data)
        var scriptEl = $('<script></script>').html(scriptText).appendTo(container)

        // now call the editPost function
        editPost()

        $("#"+saveBoardButtonId+"-formBoardEdit").hide();
        container.show();
    }
});