javascript — PHP думает, что пишет в файл .txt, но на самом деле это не так
В настоящее время я пишу небольшой сайт, на котором каждый может установить, будут ли они присутствовать или нет. Каждый посетитель сайта может видеть, кто будет присутствовать, а кто нет. есть небольшой переключатель (флажок с CSS над ним), который указывает на присутствие.
Сейчас я работаю над переключателем (флажком), который запоминает состояние, в котором он находится при перезагрузке страницы. Я сделал это, записав в простой файл .txt на сервере «true» или «false». При запуске он читает состояние текстового файла. Я также включил много консольных комментариев, чтобы увидеть, где все идет не так, но теперь я застрял.
В конце комментария, когда флажок изменен, он читает файл .txt с fread, чтобы проверить, работает ли 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>
Решение
TL; DR вам необходимо усилить программирование клиент-сервер и обратный вызов AJAX в код PHP. Рекомендуется учебник по PHP и jQuery. Я собираюсь на конечности здесь и предлагаю вам проверить http://www.w2ui.com для разработки интерфейса (и теперь я буду гореть всеми, кто предлагает их любимый фреймворк или библиотека 😉 )
Вам на самом деле нужно два файлы (как минимум). Только второй должен быть PHP. Во-первых, в Javascript вы перехватываете изменение флажка.
Обычно это делается с помощью jQuery или аналогичного, потому что это очень просто:
// this will only work if jQuery is loaded
$('#idOfMyCheckbox').on('change', function() {
$.post(
'/url/of/my/checkbox/saver',
{
state: $(this).val()
},
function(ret) {
alert("The server replied: " + ret.message);
}
).fail(function() {
alert("something went very wrong");
});
});
PHP вызывается $.post AJAX, и получит $_POST['state'] значение.
<?php
$fp = fopen("state.txt", "w");
fwrite($fp, $_POST['state']); // DANGER WILL ROBINSON: NO ERROR CHECKING HERE.
fclose($fp);
?>
Как только у вас есть заявка, вам нужно знать, что это на самом деле делает. Например, загрузка приведенного выше кода (как только вы предоставите ему правильный HTML, jQuery-привязки и т. Д.) Должна работать точно ничего такого, кроме загрузки необходимых ресурсов.
Затем изменение состояния флажка должно инициировать HTTP-запрос POST к URL-адресу сохранения состояния.
Чтобы убедиться в этом, вам будет полезно либо расширение Chrome WebTools, либо расширение Firebug Firefox. Я думаю, вы уже используете что-то подобное, так как вы выпускаете console.log звонки. Эти инструменты также регистрируют использование ресурсов и ошибки.
Они также позволяют вам совершать вызовы из интерфейса консоли, так что вы можете, например, бежать
$('#idOfYourCheckbox')
и убедитесь, что он возвращает массив только с одним объектом (в противном случае с селекторами что-то пошло не так. Я обычно копирую, вставляю и получаю в итоге <input id="#myId"> вместо <input id="myId">, например).
Затем вы можете вручную выдать .post позвоните и убедитесь, что он гаснет и что возвращает система. Выше я не удосужился добавить возврат JSON, который требуется для запроса AJAX:
fclose($fp);
Header("Content-Type: application/json;charset=utf-8");
die(json_encode(array(
'status' => 'OK',
'message' => 'It worked!',
)));
(Я сделал это из-за лени. Мой плохой. Но все это говорит о том, что вы не должны ожидать, что просто вставите кусок кода на сайт и он заработает — вам нужно знать, что он делает, что ожидается сделать, и даже тогда вам нужно будет немного поиграться).
<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>
На стороне PHP мы получим команды в test.php:
<!-- 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");
}
Другие решения
Других решений пока нет …