onclick函数中双引号内的变量答案

【问题标题】：Variable inside double qoutes in onclick functiononclick函数中双引号内的变量
【发布时间】：2017-07-15 09:32:20
【问题描述】：

大家好，我经历了很多关于双引号内变量的讨论。但我不知道为什么这些对我不起作用.. 我的情况是这样的

onclick="cBack(this.form,{$pageurl},{$token})"

我的页面中有这种代码..单击按钮时它会调用一个函数。但在我的情况下它不起作用。它在我的控制台中显示参考错误..

我的回调函数

function cBack(frm,pageurl,token)
  {

    pageurl=pageurl.trim(); 
    frm.method="post";
    frm.action=pageurl+'?gtoken='+token;
    frm.submit();  

}

帮我解决这个问题..

【问题讨论】：

标签： javascript php

【解决方案1】：

$pageurl 和 $token 是字符串，需要这样的引号：

onclick="cBack(this.form,'{$pageurl}','{$token}')"

使用纯 PHP 且没有模板引擎：

onclick='cBack(this.form,<?php echo json_encode($pageurl) ?>, <?php echo json_encode($token) ?>)'

请注意我切换到单引号，因为 json_encode 将使用双引号。无论变量的内容如何，这都会生成保存（意味着编码）JavaScript 参数。

【讨论】：

我在使用时得到了这样的 url 部分 /%7B$pageurl%7D?gtoken={$token}
哦，我在想{}是你模板引擎的插入方法。

【解决方案2】：

我不会使用内联事件处理程序。我会有这样的元素：

echo '<button data-page-url="' . $pageurl . '" data-token="' . $token . '">Do something</button>';

在 JavaScript 代码中，为所有具有data-page-url 属性的元素注册一个事件监听器：

Array.from(document.querySelector('[data-page-url]')).forEach(function (element) {
  element.addEventListener('click', cBack.bind(
    null, 
    element.form, 
    element.getAttribute('data-page-url'),
    element.getAttribute('data-token')
  ));
});

【讨论】：