logo标签列表

服务器端代码与客户端代码混合-最佳实践

phpjavascriptjquery
3
在一个给定的php脚本中，我有以下内容：
<script>

    function showMember() {

           return $.ajax({ //Perform an asynchronous HTTP (Ajax) request.

                type: 'get',

                //A string containing the URL to which the request is sent.
                url: '<?php echo $this->createUrl('member'); ?>',
    ...

如果我把这个代码放在php文件里面，它可以工作。

但是这似乎不是一个很好的组织方式，我希望把所有的代码都放在一个单独的.js文件中。

处理这些情况的正确方法是什么？

可能是 http://stackoverflow.com/questions/2267894/what-the-best-way-to-handle-server-side-tags-inside-of-a-js-file 的重复问题。 - Simone
3个回答
4
我们使用两种方法使服务器端创建的数据可供客户端访问：
1）由服务器端脚本填充的“数据传输”对象。例如：
PHP:
<?php
  $data = [
    'urls' => [
      'createSomething' => $this->createUrl($from, $something),
      // ...
    ],
    'labels' => [
      'createSomething' => $this->cms($labelName),
      // ..
    ],
  ]
?>
<script>
  var dto = <?= json_encode($data) ?>;
</script>

JS:

$.ajax(dto.urls.createSomething, {}, function() { 
  alert(dto.labels.createSomethingSuccess);
}

2）数据集属性，同样由服务器填充。例如：

PHP：

<button data-target-url="<?= $this->createUrl($from, $something) ?>"
     >Something</button>

JS:

$('button[data-target-url]').click(function() {
  var targetUrl = $(this).data('targetUrl');
  $.post(targetUrl...);
}

第二种方法对我来说似乎最有用，特别是在某些UI相关的属性仍然在服务器端计算的情况下 - 例如插件设置。
1
最好将您的PHP和JavaScript代码分开。您可以生成一个基本URL，以便JavaScript可以生成自己的URL。在HTML中使用PHP生成这些变量。
在您的HTML和PHP示例中：
<html>
<head>
  <script>
  var BASE_URL = <?=$baseUrl?>;
  </script>
  <script src="external.js"></script>
</head>
<body>
</body>
</html>

然后您可以在external.js中使用变量BASE_URL。
function showMember() {

       return $.ajax({ //Perform an asynchronous HTTP (Ajax) request.

            type: 'get',

            //A string containing the URL to which the request is sent.
            url: BASE_URL + "member",

这是许多网站使用的简单情景。在导入外部脚本之前，在页面主体中生成全局脚本变量。

0

您可以调用JavaScript函数并将URL作为函数参数发送。

showMember(<?php echo $this->createUrl('member'); ?>);

在 JavaScript 中捕获并使用它。

function showMember(posturl) {
return $.ajax({ //Perform an asynchronous HTTP (Ajax) request.

                type: 'get',

                //A string containing the URL to which the request is sent.
                url: posturl,
但在这种情况下，也并没有完全分离，是吗？showMember Javascript 仍然在 PHP 代码上执行。我错了吗？ - MEM
如果你想在 JavaScript 中使用 PHP 值，那么完全的分离（你所指的）是不可能的。你必须从你的 PHP 文件中将 PHP 值传递给 JavaScript。 - Biswajit Maji
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接