PHP认为它正在写入.txt文件，但它实际上不是

时间：2015-12-16 12:17:10

标签： javascript php fwrite saving-data

我目前正在撰写一个小网站，每个人都可以设置它们是否存在。该网站的每个访问者都可以看到谁将出席，谁不出席。有一个小开关（一个带有CSS的复选框），表示存在。

我正在处理的事情是一个开关（复选框），它将记住它在页面重新加载时的状态。我这样做的方法是在服务器上写一个简单的.txt文件'true'或'false'。在启动时，它会读取文本文件的状态。我还包含了很多控制台评论，以查看它出错的地方，但现在我卡住了。

在注释结束时，当复选框被更改时，它会读取带有fread的.txt文件，以检查fwrite是否有效。在控制台中它说它写得正确（.txt文件根据上一次写入读取它应该的变量。）但是如果我通过我的网站www.example.eg/textfile.txt访问该文件，它说它没有'改变了。在重新加载页面时也不会保存复选框状态。

<!DOCTYPE html>
<html>
    <head>


        <script>
        function startupfunction(){
        <?php //reading current state
        $myfile = fopen("switchstate.txt", "r") or die("Unable to open file!");
        $output = fread($myfile,filesize("switchstate.txt"));

        // $output = "42";
        ?>

        var data = '<?php echo $output; ?>';
        var startupsetting;

        console.log("the initial (startupfunction) reading out of .txt(var = data):" + data);
        if(data == "true"){
            console.log("The if(true) statement based on var data works. setting bool to TRUE to change to correct switchstate")
            startupsetting = true;
        }
        else{
            console.log("The if(true) statement based on var data works. setting bool to FALSE to change to correct switchstate")
            startupsetting = false;
        }
        document.getElementById("myCheck").checked=startupsetting;
        console.log("This is done by setting a bolleaan called startupsetting this is now equal to:" + startupsetting);

        var x = document.getElementById("myCheck").checked;
        console.log("Now reading the state of the switch? did it work (is it equal to line above)" + x)
        } //close startupfunction


        window.onload = startupfunction;                    //set state of checkbox(switch)

        </script>
        </head>

<body>




<style>                                                                                             
    .onoffswitch {
    position: relative; width: 90px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
    display: block; width: 200%; margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "WEL";
    padding-left: 10px;
    background-color: #34A7C1; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content: "NIET";
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}
.onoffswitch-switch {
    display: block; width: 18px; margin: 6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 56px;
    border: 2px solid #999999; border-radius: 20px;
    transition: all 0.3s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px; 
}
</style>




<div class="onoffswitch">
    <input onchange="myFunction();" type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myCheck">
    <label class="onoffswitch-label" for="myCheck">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>




<script>
function myFunction() {
    var x = document.getElementById("myCheck").checked;
    console.log("now starting measuring changes, x value changing...")
    console.log("Value of x before flipping:"+ x);
    x = (x) ? false : true;
    console.log("Value of x after flipping:" + x);

    //if(x==true) blaablaablaa
    if(x == true){
            <?php   //write 0 back to .txt file onserver
            $myfile = fopen("switchstate.txt", "w") or die("Unable to open file!");
            $txt = "false";
            fwrite($myfile,$txt);

            ?>

            console.log("wrote false(using the if/true statement) to .txt...");
            console.log("starting reading .txt file")

            <?php //reading current state
            $myfile = fopen("switchstate.txt", "r") or die("Unable to open file!");
            $output = fread($myfile,filesize("switchstate.txt"));

            // $output = "42";
            ?>

            var data = '<?php echo $output; ?>';
            console.log("the .txt file now reads:" + data);

    }

    else{
            <?php   //write 0 back to .txt file onserver
            $myfile = fopen("switchstate.txt", "w") or die("Unable to open file!");
            $txt = "true";
            fwrite($myfile,$txt);

            ?>
            console.log("wrote true(using the else/false statement) to .txt...");
            console.log("starting reading .txt file")

            <?php //reading current state
            $myfile = fopen("switchstate.txt", "r") or die("Unable to open file!");
            $output = fread($myfile,filesize("switchstate.txt"));

            // $output = "42";
            ?>

            var data = '<?php echo $output; ?>';

            console.log("the .txt file now reads:" + data);

    }


}
</script>
</body>
</html>

1 个答案:

答案 0 :(得分：1)

TL; DR 您需要加强客户端/服务器编程和AJAX回调PHP代码。推荐一个关于PHP和jQuery的教程。我在这里走出困境，建议你查看http://www.w2ui.com进行界面开发（ ，现在我被大家暗示他们的最喜欢的框架或库; - ） ）

您实际上需要两个文件（至少）。只有第二个需要是PHP。首先，在Javascript中，您可以截取复选框更改。

这通常使用jQuery或类似方法完成，因为它使这种事情变得非常简单：

$.post

PHP由$_POST['state'] AJAX调用，并且会收到<?php $fp = fopen("state.txt", "w"); fwrite($fp, $_POST['state']); // DANGER WILL ROBINSON: NO ERROR CHECKING HERE. fclose($fp); ?> 值。

console.log

调试

获得应用程序后，您需要知道它实际上是什么。例如，加载上面的代码（一旦你提供正确的HTML，jQuery绑定等），除了加载所需的资源外，应该完全 nothing 。

然后，更改复选框的状态应触发HTTP POST到状态保存URL。

要验证这一点，您会发现Chrome的WebTools或Firefox的Firebug扩展程序非常有用。我猜你自从发出$('#idOfYourCheckbox') 电话后就已经在使用类似的东西了。这些工具还记录资源使用情况和错误。

它们还允许您从控制台界面发出呼叫，因此您可以例如运行

<input id="#myId">

并验证它返回一个只包含一个对象的数组（否则，选择器会出现问题。例如，我通常会复制并粘贴，最后使用<input id="myId">代替.post。< / p>

然后，您可以手动发出 fclose($fp); Header("Content-Type: application/json;charset=utf-8"); die(json_encode(array( 'status' => 'OK', 'message' => 'It worked!', ))); 调用，并验证它是否已关闭以及系统返回的内容。上面，我没有打扰添加AJAX查询所需的JSON返回：

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    </head>
    <body>
        <input id="mycheck" type="checkbox" />
    </body>
    <script>
        // jQuery main function
        jQuery(document).ready(function($) {

            /* Call this function on every change of myCheck.
               Since it is bound to #mycheck, inside the function
               'this' refers to the checkbox, and $(this) is the
               jQuery object mapping the checkbox.
            */
            $('#mycheck').on('change', function(e) {
                $.post(
                    'test.php',
                    {
                         cmd        : "set",
                         state      : $(this).prop("checked"),
                         timestamp  : new Date().getTime(),
                         hello      : "world"
                    },
                    function(reply, textStatus, jqXHR) {
                        if (!reply.hasOwnProperty('message')) {
                            console.log("the server replied with no message");
                            return;
                        }
                        console.log("the server replied: " + reply.message);
                    }
                ).fail(function(e) {
                    alert("Something went wrong");
                });
            });

            /* Now we also want to know what the status is NOW. */
            $.post(
                'test.php',
                {
                     cmd        : "get",
                     timestamp  : new Date().getTime()
                },
                function(reply, textStatus, jqXHR) {
                    if (!reply.hasOwnProperty('state')) {
                        console.log("the server replied with no state");
                        return;
                    }
                    // If the server replied TRUE we set state to true.
                    // Else to false.
                    $('#mycheck').prop('checked', reply.state);
                }).fail(function(e) {
                    alert("Something went wrong");
                });

        });
    </script>
</html>

（我是出于懒惰而做的。我很糟糕。但这一切都表明你不应该只是想在网站上插入一段代码并让它运转起来 - 你需要知道它是什么是的，它应该做什么，即便如此，你也需要好好处理它。）

自包含示例（状态加载也是如此）

<!-- lang: lang-php5 -->
<?php
    function reply($reply) {
        Header("Content-Type: application/json;charset=utf-8");
        die(json_encode($reply));
    }
    function replyError($message) {
        return reply(array('status' => 'error', 'message' => $message));
    }
    function replySuccess($data, $message = '') {
        return reply(array_merge(
            array('status' => 'success', 'message' => $message),
            $data
        ));
    }

    array_key_exists('cmd', $_POST) || replyError('cmd not set');

    switch($_POST['cmd']) {
        case 'set':
            $fp = fopen('state.txt', 'w');
            $state = in_array($_POST['state'], array(1, "1", "true", true));
            fwrite($fp, $state ? "CHECKED" : "NOT CHECKED");
            fclose($fp);
            replySuccess(array('state' => $state));
        case 'get':
            if (!file_exists('state.txt')) {
                $state = false;
            } else {
                $text = file_get_contents('state.txt');
                $state = ('CHECKED' == $text);
            }
            replySuccess(array('state' => $state));
        default:
            replyError("cmd={$_POST['cmd']} is not recognized");
    }

PHP方面我们将收到命令到test.php：

import tkFileDialog
import Tkinter as tk
from Tkinter import *
import logging

 logging.basicConfig(filename= "log_file.txt", filemode = "w", level=logging.DEBUG, format='%(asctime)s %(message)s', datefmt='%d/%m/%Y %I:%M:%S %p')

logging.warning('is when this event was logged.')

class HomeScreen:
def __init__(self, master):
    self.master = master
    self.frame = tk.Frame(self.master)
    self.button1 = tk.Button(self.frame, text = 'Run Text', width = 25, command = self.new_window)
    self.button1.pack()
    self.frame.pack()

def openFile(self):
    openfile = tkFileDialog.askopenfile().read()
    text= open(openfile, 'r').read()
    T.insert(1.0, openfile)
    T = Text(height=10, width=100)
    T.pack()
    T.insert(END, "Select file to input")
    B = Button(root, text="Open", command=openFile)
    B.pack()
    mainloop()
    return

def new_window(self):
    self.newWindow = tk.Toplevel(self.master)
    self.app = Quit(self.newWindow)

class Quit:
def __init__(self, master):
    self.master = master
    self.frame = tk.Frame(self.master)
    self.quitButton = tk.Button(self.frame, text = 'Quit', width = 25, command = self.close_windows)
    self.quitButton.pack()
    self.frame.pack()
def close_windows(self):
    self.master.destroy()

def main(): 
root = tk.Tk()
app = HomeScreen(root)
app = Quit(root)
root.mainloop()

if __name__ == '__main__':
main()
相关问题
最新问题