我有一个调用PHP函数的JavaScript函数。如何将结果显示在html中而不是显示在警告框中?

时间:2017-06-12 21:08:07

标签: javascript php curl

我有一个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>   

1 个答案:

答案 0 :(得分:0)

使用您的代码,这一部分:

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