如何在您的网站中编写程序并在 JDoodle 在线编译器中重定向它？

在编写程序时，经常需要进行编译和执行代码。为了方便，您可以使用 JDoodle 在线编译器来测试您的代码。本文将介绍如何在您的网站中编写程序并在 JDoodle 在线编译器中重定向它。

步骤一：在 JDoodle 注册账户

访问 JDoodle 官网并注册一个新账户。注册后，您将获得一个 API key，您需要保存它，因为它将在本教程的后面步骤中使用。

步骤二：创建 HTML 页面

在您的网站中创建一个 HTML 页面，并添加一个表单来接收用户输入的代码。表单应该类似于以下内容：

<form action="http://www.jdoodle.com/api/v1/execute" method="post">
  <input type="hidden" name="clientId" value="my_client_id" />
  <input type="hidden" name="clientSecret" value="my_client_secret" />
  <textarea name="script" rows="10" cols="50"></textarea>
  <input type="submit" value="Run" />
</form>

在这里，我们使用了一个隐藏的形式来将 clientId 和 clientSecret 值传递给 JDoodle API，以便进行身份验证。这些值在注册 JDoodle 账户时会分配给您。

我们还添加了一个名为“script”的文本区域，以允许用户输入他们的代码。最后，我们添加了一个提交按钮，用于提交表单。

步骤三：编写 JavaScript 代码

现在，我们需要编写一些 JavaScript 代码来处理表单提交并将代码提交到 JDoodle API。以下是示例代码：

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  var script = document.querySelector('textarea').value;
  var xhttp = new XMLHttpRequest();
  xhttp.open('POST', 'http://www.jdoodle.com/api/v1/execute');
  xhttp.setRequestHeader('Content-Type', 'application/json');
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      var response = JSON.parse(xhttp.responseText);
      // Do something with the response here...
    }
  };
  var data = JSON.stringify({
    clientId: 'my_client_id',
    clientSecret: 'my_client_secret',
    script: script,
    language: 'python3',
    versionIndex: '0',
    stdin: '',
  });
  xhttp.send(data);
});

此代码将在表单提交时运行，并将代码字符串发送到 JDoodle API。您需要将 clientId 和 clientSecret 替换为您的实际值，并可以根据需要更改语言和版本索引。

步骤四：处理响应

最后，我们需要处理从 JDoodle API 返回的响应。您可以在 xhttp.onreadystatechange 函数中处理响应。

以下是示例代码：

if (xhttp.readyState == 4 && xhttp.status == 200) {
  var response = JSON.parse(xhttp.responseText);
  console.log(response);
  document.querySelector('#output').innerHTML = response.output;
}

此代码将使用 JSON.parse 函数解析响应文本，并将输出设置为来自响应的输出字符串。

结论

通过使用 JDoodle API，您可以在您的网站中方便地测试和执行用户代码。通过遵循本教程中的步骤，您可以将代码提交到 JDoodle API 并从中获取响应，以便进行进一步处理。