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

Question

我在 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('测试');错误消失了，但我正在努力弄清楚错误是否与该 block 内的语法相关，或者我是否只是没有正确解析/编码它。

我知道 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:预期表达式，得到 '}'”。

Answer 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; ?>