我有一個調用PHP函數的JavaScript函數。我怎樣才能得到的結果顯示在HTML中，而不是在一個警告框？

Question

我有一個PHP函數，可以對一個API進行cURL調用。我希望通過使用JavaScript單擊按鈕觸發此調用。我怎樣才能得到結果顯示在HTML中，而不是在一個警告框？我的代碼如下：

<script> 
     function echoSkilljar() { 
      alert("<?php skilljarApiCall(); ?>"); 
     } 
     </script> 

    <?php 
     function skilljarApiCall() { 
      // Get cURL resource 
      $curl = curl_init(); 

      // Set some options - passing a username to Skilljar in the URL 
      curl_setopt_array($curl, array(
       CURLOPT_RETURNTRANSFER => 1, 
       CURLOPT_URL => 'https://api.skilljar.com/v1/users/***********/published-courses', 
       CURLOPT_HEADER => 0, 
       CURLOPT_HTTPAUTH => CURLAUTH_BASIC, 
       CURLOPT_USERNAME => 'sk-live-***********' 
       )); 

       // Send the Request & save response to $response 
       $response = curl_exec($curl); 

       // Close request to clear up some resources 
       curl_close($curl); 

       // Trim response string to remove leading and trailing "[ and ]" 
       $trimmed = trim($response, '"['); 
       $newTrimmed = rtrim($trimmed, ']"'); 

       // Convert trimmed string to JSON 
       $json = json_encode($newTrimmed); 

       // Convert JSON to usable associative array 
       $newJson = json_decode($json); 
       $array = json_decode($newJson, true); 

       // Make sure it worked... (fingers crossed); 
       // var_dump($array); 

       // Yay it worked! Now make sure we can access the elements of the array... 
       echo $array['course']['id'] . "/ " . $array['course']['title']; 
     } 
    ?> 

    <button onclick="echoSkilljar()">Skilljar Stuff</button> 
    <div id="info"></div> 

Answer 1

與您的代碼，這部分：

<script> 
    function echoSkilljar() { 
     alert("<?php skilljarApiCall(); ?>"); 
    } 
</script> 

基本得到解決一些固定字符串。我們假設結果是my-output。這意味着你的HTML看起來像這樣渲染時：

<script> 
    function echoSkilljar() { 
     alert("my-output"); 
    } 
</script> 

因此，在這種情況下，我們只是在談論如何使在HTML一個簡單的字符串輸出。

有很多方法可以解決這個問題。你沒有指定，但我會假設你想把它放在<div id="info"></div>之內。

爲此，我們將選擇它並將其設置爲innerText。

<script> 
 
    function echoSkilljar() { 
 
    document.getElementById('info').innerText = "my-content"; 
 
    } 
 
</script> 
 

 
<button onClick="echoSkilljar()">Click Me</button> 
 
<div id="info"></div>

基本上，只需更換這行：

alert("<?php skilljarApiCall(); ?>"); 

與此：

document.getElementById('info').innerText = "<?php skilljarApiCall(); ?>"; 

在呈現時，它會是這樣的：

document.getElementById('info').innerText = "my-content";