如何正确编码 PHP 中的 JavaScript 以附加到页面?
Posted
技术标签:
【中文标题】如何正确编码 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 : "\"\""); ?>
因为我正在使用空字符串输出作为文本框。以上是关于如何正确编码 PHP 中的 JavaScript 以附加到页面?的主要内容,如果未能解决你的问题,请参考以下文章
C# UTF-8 base64 编码在 PHP 中无法正确解码