服務器端代碼與客戶端代碼混合 - 最佳實踐

內的給定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文件中。

處理這些情況的正確方法是什麼？

來源

2013-04-28 MEM

的可能的複製http://stackoverflow.com/questions/2267894/what-the-best-way-to-handle-server-side-tags-inside-of-a-js-file – Simone 2013-04-28 13:06:22

我們用兩種方法來使在服務器端對客戶端的訪問創建的數據：

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...); 
}

第二種方法，對我來說，似乎是最有用的，當有一個在服務器仍然計算屬性的一些用戶界面相關的設定 - 例如，插件設置。

來源

2013-04-28 13:08:37 raina77ow

最好分割你的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

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",

這是一個簡單的場景，很多網站使用使用變量BASE_URL。在包含外部腳本之前，在主體中生成全局腳本變量。

來源

2013-04-28 13:08:28 automaticoo

你可以調用一個javascript函數併發送url作爲函數參數。

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

在js中捕獲並使用它。

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,

來源

2013-04-28 13:12:32

但在那種情況下，也沒有完全分離，不是嗎？ showMember javascript仍然在php代碼上執行。我錯了嗎？ – MEM 2013-04-28 14:18:26

如果你想在JavaScript內部使用php值，那麼總分離（你的意思是）是不可能的。你必須從你的php文件傳遞php值給js。 – 2013-04-28 14:22:29

服務器端代碼與客戶端代碼混合 - 最佳實踐

回答

相關問題