我有一个调用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";