将更改保存到文件而无需重新加载页面 [英] Save Changes to File Without reloading Page
问题描述
现在，我有一个HTML文本区域，可从文本文件获取其内容.我想要做的是允许用户在文本区域中编辑文件，当他们按下按钮时，所做的更改将推送到文件中，而无需重新加载整个页面.
Right now I have an HTML textarea that gets its contents from a text file. What I want to be able to do is allow the user to edit the file in the textarea and when they press a button, the changes get pushed to the file without having to reload the whole page.
我了解到仅靠JavaScript不能做到这一点，因为它是一种客户端语言，但是我想可以用AJAX做到这一点?我在AJAX方面没有太多经验，所以可能行不通.
I understand this can't be done with javascript alone because its a client side language, but I was thinking this could maybe be done with AJAX somehow? I don't have much experience with AJAX, so that might not work.
为了简单起见，我想远离websocket.
I want to stay away from websockets for the sake of simplicity for what I have to do.
下面是我的PHP textarea代码:
Below is my PHP textarea code:
<?php
$myfile = fopen($file, 'a+');
echo "<textarea id='demo'>";
// go through each line in the file, print its contents.
while(!feof($myfile)) {
echo fgets($myfile);
}
echo "</textarea>";
?>
推荐答案
无需刷新整个页面，就可以使用jquery ajax更新文本区域.当您单击index.php上的 save changes (在我的示例中)时，我们通过 id ="demo" 来获取textarea的值并将其发送给update.php.在update.php中，我们使用 fwrite()清除所有现有文本并将从 textarea 中获得的新内容写入其中，并像我们一样显示新文本在 index.php 中.
Without refreshing the whole page you can update the textarea using jquery ajax. When you click save changes on index.php(in my example here), we get the value of the textarea by its id="demo" and send it update.php. In update.php, we use fwrite() to clear all existing text and write the new content we get from our textarea to it, and display the new text like we did in index.php.
所以这是 index.php :
<!DOCTYPE HTML>
<html>
<head>
<title>TextArea Lesson</title>
<style>
div{
margin:0 auto 0;
width:400px;
height:300px;
}
#demo{
margin-left:5px;
width:390px;
height:200px;
}
</style>
</head>
<body>
<div>
<form method="POST">
<fieldset>
<legend>Ajax Update Text Area</legend>
<?php
$myfile = fopen('test.txt', 'r');
echo "<textarea id='demo'>";
// go through each line in the file, print its contents.
while(!feof($myfile)) {
echo fgets($myfile);
}
echo "</textarea><br>";
?>
<input type="submit" id="save" value="Save changes" />
</fieldset>
</form>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"
integrity="sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk="
crossorigin="anonymous"></script>
<script>
//when you click save changes, we get its id="save"
//and prevent default submission
$(document).on("click", "#save", function(e){
e.preventDefault();
//get the textarea data bu its id="demo"
var textdata = $('#demo').val();
mydata= 'testdata='+textdata;
$.ajax({
type:'POST',
data:mydata,
url:'update.php',
success:function(data) {
if(data){
alert('Saved!');
$("#demo").html(data);//load data from update.php
}else{
alert('Update failed');
}
}
});
});
</script>
Update.php :
<?php
$data_to_write = $_POST['testdata'];
$file_path = 'test.txt';
$file_handle = fopen($file_path, 'w');
fwrite($file_handle, $data_to_write);
fclose($file_handle);
$myfile = fopen('test.txt', 'r');
while(!feof($myfile)) {
echo fgets($myfile);
}
fclose($myfile);
?>
和 test.txt :
那只大大的棕色黑狐狸跳过了一只懒狗.
The big quick brown black fox jumps over a lazy dog.
我希望这可以对您有所帮助.注意:这只是一个工作代码，仅用于学习目的.因此无法确保安全性检查和数据验证.
I hope this may help you. Note: This is just a working code and for learning purpose only. So security checking and data validation is not ensured.
这篇关于将更改保存到文件而无需重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
