在线 PHP运行工具数据库可控

最新推荐文章于 2026-06-01 05:04:07 发布

原创最新推荐文章于 2026-06-01 05:04:07 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一种在线PHP编辑工具的实现方法，通过Ajax上传源代码并获取运行结果，支持数据库操作，提供了一个随时随地可用的PHP环境。

Python3.8

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

摘要

不知道大家有没有看到过这样的一个网站。名字是“菜鸟工具”，里面有很多的在线编辑，在线运行的小工具，实用也很方便。（嘻嘻，不是打广告哈，不过确实很实用）。

菜鸟工具

作为一个PHP菜鸟，如果能有一个好用的，随时随地练习语法的工具该有多好啊。很明显，上面的那个PHP在线工具，基本上已经可以满足正常的需求了。

但是美中不足的是，不支持数据库以及其他高级特性。所以这就显得很尴尬了。不能练习数据库语句，那还学个毛啊。所以还是自己动手吧，写个能支持数据库的在线工具，自己用。

实现思路

对于PHP文件而言，浏览器向服务器发送url请求的时候，解释器就会自动的把文件翻译成了浏览器可以解析的部分了。所以访问url的过程就是获取php解释过的数据的过程。

简要解释

下面简要的做个解释。比方说咱们有这样的一个temp.php文件，内容如下：

<?phpecho "Hello PHP";
  1
2
3

浏览器访问的时候，得到的数据如下：
temp.php访问结果

工具原理

既然上面的temp.php文件可以这样工作，那么试想一下，如果我们事先把想运行的文件放到temp.php文件里面，然后在访问这个temp.php文件，这样岂不是就可以得到我们想要的结果啦。

而事实上，我就是这么干的，结果也证明，顺序得当的话，还是挺不错的。

我的想法就是：

给个按钮，点击按钮的时候首先会把源代码发送到服务器上，接下来调用一个ajax请求，把源代码的运行结果取出来，显示到“控制台”上。

制作

下面将介绍具体的实现流程。

main.php

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>我自己的PHP工具</title><link rel="shortcut icon" href="favicon.ico" type="image/x-ico" /><style>.container {    width: 1356px;    height: 640px;    position: absolute;    background: #CCC;}.left {    width: 50%;    height: 100%;    background: lightgray;    position: relative;    float: left;}.header {    width: auto;    height: 61px;}input {    width: 180px;    height: 60px;    position: relative;    background: lightgreen;    float: right;    margin-right: 12px;    margin-top: 6px;    border-radius: 25px;    box-shadow: 1px 1px 1px #6e6e6e;}.panel {    width: 90%;    height: 540px;    align: center;}textarea {    font-size: 28px;}.right {    width: 50%;    height: 100%;    background: deepskyblue;    position: relative;    float: right;}</style></head><body>    <div class="container">        <div class="left">            <div class="header">                <label><font size="5">在下面写上您的PHP代码.</font>如： echo "Hello 郭璞";</label>                <input id="btn_run" type="submit" value="点击运行"></input>            </div>            <hr>            <div class="panel">                <textarea id="source" style="width: 645px; height: 540px;"                    name="source" placeholder="echo 'Hello World!';">                    </textarea>                <!-- <textarea type="hidden" id="hidden" hidden></textarea> -->            </div>        </div>        <div class="right">            <h2>下面将显示出您的代码的执行结果</h2>            <hr>            <div class="panel">                <textarea id="result" style="width: 645px; height: 540px;">                </textarea>            </div>        </div>    </div>    <!-- 编写提交脚本，并获取返回结果 -->    <script src="./js/jquery-2.2.4.min.js"></script>    <script>        // 请求运行结果        function getResult() {            $.ajax({                type : "GET",                url : "./temp.php",                success : function(data) {                    document.getElementById("result").value = data;                },                error : function(err) {                    document.getElementById("result").value = err;                }            });        }        // 将源代码上传到服务器上        function uploadSource() {            var source = document.getElementById("source").value;            $.ajax({                    type: "POST",                    url: "./main.php",                    data: {                        "source": source                         },                    success: function(){                        console.log("代码上传成功！");                        },                    error: function(err){                        console.log("代码上传失败！");                        alert(err);                        }                });        }        // 使用ajax来 获取执行的结果        $(document).ready(function() {            document.getElementById("result").value = "正在获取运行结果··· ···";            $("#btn_run").click(function(){                // 先上传代码                uploadSource();                // 请求代码运行后的结果                getResult();            });        });    </script>    <!-- 编写php脚本，获取提交信息 -->    <?php    $source = $_POST ['source'];    $source = "<?php  " . $source;    file_put_contents ( "./temp.php", $source );    ?></body></html>
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

上传源码

<!-- 编写php脚本，获取提交信息 -->    <?php    $source = $_POST ['source'];    $source = "<?php  " . $source;    file_put_contents ( "./temp.php", $source );    ?>
  1
2
3
4
5
6
7

经过这段代码，就可以将编辑好的源码上传到服务器上指定的temp.php上了，然后准备过程就结束了。

ajax

这里ajax起到了两方面的作用：

一个是上传源代码
一个是获取代码运行结果

上传源码

// 将源代码上传到服务器上        function uploadSource() {            var source = document.getElementById("source").value;            $.ajax({                    type: "POST",                    url: "./main.php",                    data: {                        "source": source                         },                    success: function(){                        console.log("代码上传成功！");                        },                    error: function(err){                        console.log("代码上传失败！");                        alert(err);                        }                });        }
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

获取运行结果

// 请求运行结果        function getResult() {            $.ajax({                type : "GET",                url : "./temp.php",                success : function(data) {                    document.getElementById("result").value = data;                },                error : function(err) {                    document.getElementById("result").value = err;                }            });        }
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

触发时机

按照需求，只有在点击运行按钮的时候，才会执行上传，下载流程。所以只需要为按钮添加一个点击事件就可以啦。

$(document).ready(function() {            document.getElementById("result").value = "正在获取运行结果··· ···";            $("#btn_run").click(function(){                // 先上传代码                uploadSource();                // 请求代码运行后的结果                getResult();            });        });
  1
2
3
4
5
6
7
8
9