身為PHP菜鳥,如果能有個好用的,隨時隨地練習文法的工具該有多好啊。很明顯,上面的那個PHP線上工具,基本上已經可以滿足正常的需求了。
但是美中不足的是,不支援資料庫以及其他高階特性。所以這就顯得很尷尬了。不能練習資料庫語句,那還學個毛啊。所以還是自己動手吧,寫個能支援資料庫的線上工具,自己用。
對於PHP檔案而言,瀏覽器向伺服器發送url請求的時候,解釋器就會自動的把檔案翻譯成了瀏覽器可以解析的部分了。所以訪問url的過程就是取得php解釋過的資料的過程。
下面簡單的做個解釋。比方說咱們有這樣的一個temp.php文件, 內容如下:
<?php echo "Hello PHP";
瀏覽器存取的時候,得到的資料如下:
既然上面的temp.php檔案可以這樣運作,那麼試想一下,如果我們事先把想運行的檔案放到temp.php檔案裡面,然後在存取這個temp.php文件,這樣豈不是就可以得到我們想要的結果啦。
而事實上,我就是這麼乾的,結果也證明,順序得當的話,還是挺不錯的。
我的想法是:
給個按鈕,點擊按鈕的時候首先會把原始碼送到伺服器上,接下來呼叫一個ajax請求,把原始碼的運行結果取出來,顯示到「控制台」上。
以下將介紹具體的實作流程。
<!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> <p class="container"> <p class="left"> <p class="header"> <label><font size="5">在下面写上您的PHP代码.</font>如: echo "Hello 郭璞";</label> <input id="btn_run" type="submit" value="点击运行"></input> </p> <hr> <p class="panel"> <textarea id="source" style="width: 645px; height: 540px;" name="source" placeholder="echo 'Hello World!';"> </textarea> <!-- <textarea type="hidden" id="hidden" hidden></textarea> --> </p> </p> <p class="right"> <h2>下面将显示出您的代码的执行结果</h2> <hr> <p class="panel"> <textarea id="result" style="width: 645px; height: 540px;"> </textarea> </p> </p> </p> <!-- 编写提交脚本,并获取返回结果 --> <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>
<!-- 编写php脚本,获取提交信息 --> <?php $source = $_POST ['source']; $source = "<?php " . $source; file_put_contents ( "./temp.php", $source ); ?>
經過這段程式碼,就可以將編輯好的原始碼上傳到伺服器上指定的temp.php上了,然後準備過程就結束了。
這裡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); } }); }
// 请求运行结果 function getResult() { $.ajax({ type : "GET", url : "./temp.php", success : function(data) { document.getElementById("result").value = data; }, error : function(err) { document.getElementById("result").value = err; } }); }
$(document).ready(function() { document.getElementById("result").value = "正在获取运行结果··· ···"; $("#btn_run").click(function(){ // 先上传代码 uploadSource(); // 请求代码运行后的结果 getResult(); }); });
以上是詳細介紹線上PHP運作工具、資料庫可控的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!