如何正确编码 PHP 中的 JavaScript 以附加到页面？

Posted 2023-02-22

【中文标题】如何正确编码 PHP 中的 JavaScript 以附加到页面？

【英文标题】：How can I properly encode JavaScript in PHP to be appended to a page?

【发布时间】：2019-06-21 12:05:03

【问题描述】：

我在 php 中动态构建了一些 javascript。通过 AJAX 调用将其传回并附加到页面。这会导致 SyntaxError 错误。但是我很难在我的代码中找到这个错误。

我目前在 PHP 缓冲区的输出上使用 PHP 的 trim 函数，并使用 JSON.parse 来解析响应。

这是我必须解析并附加返回的 JS 代码的代码：

var managers_adjustment = jQuery.ajax(
    url: window.location.protocol + '//' + window.location.hostname + '/api_url&args[module]=Managers_adjustment&args[id]=' + id,
    xhrFields: 
    withCredentials: true
    ,
);
managers_adjustment.done(function(r)
    console.log(r);
    jQuery(local_el).find('.dopbsp-data-body:first').append(JSON.parse(r.data));
);

这是我正在构建和返回动态 JS 的 PHP：

ob_start();
global $wpdb;
$current_total = $wpdb->get_results( "SELECT `price_total` FROM `wp_dopbsp_reservations` WHERE `id` = " . $args['id'] );
$current_total = (int)$current_total[0]->price_total;
//$managers_adjustment_reason = get_post_meta($args['id'], 'sww_dopbsp_managers_adjustment_reason');
$managers_adjustment_reason = ( $managers_adjustment_reason ? $managers_adjustment_reason : '' );
?>
<diV id="managers_adjustment_<?php echo $args['id']; ?>">
    <div class="dopbsp-data-field dopbsp-input-wrapper dopbsp-price-total sww" style="display:none;"> 
        <label for="adjusted_total">
            Managers adjusted total
        </label> 
        <div>
            <input 
                name="adjusted_total"
                type="number" 
                step="0.01" 
                value="<?php echo $current_total; ?>"
                v-model="adjusted_total"
                v-on:change="sync"
                style="max-width:75px;"
            >
        </div>
    </div>
    <div class="dopbsp-data-field dopbsp-input-wrapper dopbsp-price-adjustment sww" style="display:none;"> 
        <label for="managers_adjustment_reason">
            Manager's adjustment reason
        </label>
        <div>
            <textarea 
                style="width:126px;"
                name="managers_adjustment_reason"
                value="<?php echo $managers_adjustment_reason; ?>"
                v-model="managers_adjustment_reason"
                v-on:change="sync"
            ></textarea>
            <button style="float:right;" data-reservation-id="<?php echo $args['id']; ?>" v-on:click="submit" class="orange-button">Save</button>
        </div>
    </div>
</diV>
    <script>
        var managers_adjustment_<?php echo $args["id"]; ?> = new Vue(
            el: "#managers_adjustment_<?php echo $args['id']; ?>",
            data: 
                current_id: <?php echo $args["id"]; ?>,
                adjusted_total: <?php echo $current_total ?>,
                managers_adjustment_reason: <?php echo $managers_adjustment_reason; ?>
            ,
            methods: 
                //sync: function(),
                submit: function()
                    console.log('submit');
                
            
        );
    </script>
<?php
$output = ob_get_clean();
$output = json_encode(trim($output));
return $output;

如果我更改标签内的内容，例如；一个 console.log('test');错误消失了，但我正在努力弄清楚错误是否与该块内的语法相关，或者我只是没有正确解析/编码它。

我知道正在返回 manager_adjustment AJAX 调用，因为我可以看到 r.data 的 console.log 输出。这是回应：

"status":"success","data":"\"<diV id=\\\"managers_adjustment_9\\\">\\r\\n\\t\\t\\t<div class=\\\"dopbsp-data-field dopbsp-input-wrapper dopbsp-price-total sww\\\" style=\\\"display:none;\\\"> \\r\\n\\t\\t\\t\\t<label for=\\\"adjusted_total\\\">\\r\\n\\t\\t\\t\\t\\tManagers adjusted total\\r\\n\\t\\t\\t\\t<\\\/label> \\r\\n\\t\\t\\t\\t<div>\\r\\n\\t\\t\\t\\t\\t<input \\r\\n\\t\\t\\t\\t\\t\\tname=\\\"adjusted_total\\\"\\r\\n\\t\\t\\t\\t\\t\\ttype=\\\"number\\\" \\r\\n\\t\\t\\t\\t\\t\\tstep=\\\"0.01\\\" \\r\\n\\t\\t\\t\\t\\t\\tvalue=\\\"105\\\"\\r\\n\\t\\t\\t\\t\\t\\tv-model=\\\"adjusted_total\\\"\\r\\n\\t\\t\\t\\t\\t\\tv-on:change=\\\"sync\\\"\\r\\n\\t\\t\\t\\t\\t\\tstyle=\\\"max-width:75px;\\\"\\r\\n\\t\\t\\t\\t\\t>\\r\\n\\t\\t\\t\\t<\\\/div>\\r\\n\\t\\t\\t<\\\/div>\\r\\n\\t\\t\\t<div class=\\\"dopbsp-data-field dopbsp-input-wrapper dopbsp-price-adjustment sww\\\" style=\\\"display:none;\\\"> \\r\\n\\t\\t\\t\\t<label for=\\\"managers_adjustment_reason\\\">\\r\\n\\t\\t\\t\\t\\tManager's adjustment reason\\r\\n\\t\\t\\t\\t<\\\/label>\\r\\n\\t\\t\\t\\t<div>\\r\\n\\t\\t\\t\\t\\t<textarea \\r\\n\\t\\t\\t\\t\\t\\tstyle=\\\"width:126px;\\\"\\r\\n\\t\\t\\t\\t\\t\\tname=\\\"managers_adjustment_reason\\\"\\r\\n\\t\\t\\t\\t\\t\\tvalue=\\\"\\\"\\r\\n\\t\\t\\t\\t\\t\\tv-model=\\\"managers_adjustment_reason\\\"\\r\\n\\t\\t\\t\\t\\t\\tv-on:change=\\\"sync\\\"\\r\\n\\t\\t\\t\\t\\t><\\\/textarea>\\r\\n\\t\\t\\t\\t\\t<button style=\\\"float:right;\\\" data-reservation-id=\\\"9\\\" v-on:click=\\\"submit\\\" class=\\\"orange-button\\\">Save<\\\/button>\\r\\n\\t\\t\\t\\t<\\\/div>\\r\\n\\t\\t\\t<\\\/div>\\r\\n\\t\\t<\\\/diV>\\r\\n\\t\\t\\t<script>\\r\\n\\t\\t\\t\\tvar managers_adjustment_9 = new Vue(\\r\\n\\t\\t\\t\\t\\tel: \\\"#managers_adjustment_9\\\",\\r\\n\\t\\t\\t\\t\\tdata: \\r\\n\\t\\t\\t\\t\\t\\tcurrent_id: 9,\\r\\n\\t\\t\\t\\t\\t\\tadjusted_total: 105,\\r\\n\\t\\t\\t\\t\\t\\tmanagers_adjustment_reason: \\t\\t\\t\\t\\t,\\r\\n\\t\\t\\t\\t\\tmethods: \\r\\n\\t\\t\\t\\t\\t\\t\\\/\\\/sync: function(),\\r\\n\\t\\t\\t\\t\\t\\tsubmit: function()\\r\\n\\t\\t\\t\\t\\t\\t\\tsend_button = jQuery(\\\"#managers_adjustment_9 button\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\tsend_button.text(\\\"Saving\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\tsend_button.addClass(\\\"sending\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\tsend_button.attr(\\\"disabled\\\", \\\"disabled\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\tvar update_total = jQuery.ajax(\\r\\n\\t\\t\\t\\t\\t\\t\\t   url: function() \\r\\n\\t\\t\\t\\t\\t\\t\\t   \\treturn window.location.protocol + \\\"\\\/\\\/\\\" + window.location.hostname + \\\"\\\/~ten\\\/?sww-api=v1&args[module]=Update_dopbsp_total&args[id]=\\\"+ this.current_id +\\\"&args[new_total]=\\\" + this.adjusted_total; \\r\\n\\t\\t\\t\\t\\t\\t\\t   ,\\r\\n\\t\\t\\t\\t\\t\\t\\t   xhrFields: \\r\\n\\t\\t\\t\\t\\t\\t\\t      withCredentials: true\\r\\n\\t\\t\\t\\t\\t\\t\\t   \\r\\n\\t\\t\\t\\t\\t\\t\\t);\\r\\n\\t\\t\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t\\t\\tupdate_total.done(function(r)\\r\\n\\t\\t\\t\\t\\t\\t\\t\\ttotal = managers_adjustment_9.adjusted_total;\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tjQuery(\\\"#managers_adjustment_9 input\\\").val(total);\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tvar total_original = jQuery(\\\"#managers_adjustment_9 input\\\").parent().closest(\\\".dopbsp-data-value\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tconsole.log(total_original);\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tjQuery(\\\"#managers_adjustment_9\\\").closest(\\\".dopbsp-data-body\\\").find(\\\".dopbsp-price-total:not(.sww) .dopbsp-data-value\\\").text(\\\"\\u00a3\\\" + total);\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tjQuery(\\\"#managers_adjustment_9.dopbsp-price-total.sww\\\").toggle();\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tsend_button.removeAttr(\\\"disabled\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tsend_button.removeClass(\\\"sending\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\t\\tsend_button.text(\\\"Save\\\");\\r\\n\\t\\t\\t\\t\\t\\t\\t);\\r\\n\\t\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t\\t\\r\\n\\t\\t\\t\\t);\\r\\n\\t\\t\\t<\\\/script>\""

我希望在 AJAX 响应完成后附加代码，这会将事件附加到 send_button + 允许我访问 console.log('submit');

目前刚刚收到错误：“SyntaxError: expected expression, got ''”。

【参考方案1】：

您的 AJAX 响应中的代码是问题所在。问题似乎出在脚本的这一部分：

data: 
    current_id: <?php echo $args["id"]; ?>,
    adjusted_total: <?php echo $current_total ?>,
    managers_adjustment_reason: <?php echo $managers_adjustment_reason; ?>
,

在返回的 json 中显示为

data: 
    current_id: 9,
    adjusted_total: 105,
    managers_adjustment_reason:
,

提示变量$managers_adjustment_reason为空，导致格式错误。我建议将变量的输出更改为类似

<?= empty($managers_adjustment_reason) ? 0 : $managers_adjustment_reason; ?>

【讨论】：

这确实是问题所在。发现得好。我选择了以下样式； <?php echo ( $managers_adjustment_reason ? $managers_adjustment_reason : "\"\""); ?> 因为我正在使用空字符串输出作为文本框。