我写了一个小php脚本来读/写文本文件，我的脚本运行良好，但提交时不会刷新页面。我知道php和jQuery，但我从未使用过Ajax。我在网上尝试了一些脚本，但没有找到我需要的东西，尽管我找到了这个读取文件的脚本。
<script type="text/javascript">
jQuery.get('line1.txt', function(data) {
$('h1').html(data);
});
</script>
因此，我的问题是如何使用php/jquery/ajax读取/写入文件，以避免刷新页面。
我的页面代码
<?php
$myfile = fopen("line1.txt", "a+") or die("Unable to open file!");
$number = (int) fgets($myfile);
if (isset($_POST["number"])) {
$number = $number+1;
$myfile = fopen("line1.txt", "w") or die("Unable to open file!");
fwrite($myfile, $number);
}
?>
<html>
<head>
<title>LINE 1</title>
</head>
<body>
<div class="container">
<h1><?= $number; ?></h1>
<form method="POST">
<input type="hidden" id="number" name="number" value = "<?= $number; ?>">
<input type="submit" value = "SUIVANT >>" id="next" name="next" class="btn btn-lg btn-primary btn-block">
</form>
</div>
</body>
</html>
如果处理的是同一个页面：为了避免当前刷新页面，您必须防止默认submit事件触发
js部分：
<script type="text/javascript">
$(document).ready(function(){
$('input:submit').click(function(e){
e.preventDefault();
$.post(window.location.href, {'number': $("input#number").val()}, function(data) {
if(data) $("input#number").val(data);
});
return false; // just in case if e.preventDefault() fails
});
});
</script>
修改的php部分：
...
if (isset($_POST["number"])) {
$number = $number+1;
$myfile = fopen("line1.txt", "w") or die("Unable to open file!");
fwrite($myfile, $number);
echo $number;
return;
}
...
为什么不使用file_get_contents和file_put_contents？
在客户端：
// First see : https://api.jquery.com/jquery.get/
// send GET request to server
// parameters send to server will be data that equals to your input value
// then when server response function will be executed.
$.get('write.php',{data : $('#number').val()},function(result){
if(result=='ok'){
alert('write done!')
}
})
和在write.php中：
<?php
if(isset($_GET['data'])){
// append text to line1.txt file!!!
file_put_contents('line1.txt',$_GET['data'],FILE_APPEND);
echo 'ok';
exit();
}
多亏了RomanPerekhrest，我修改了他的代码，使其按我需要的方式工作。我想分享完整的代码：
<?php
$myfile = fopen("line1.txt", "a+") or die("Unable to open file!");
$number = (int) fgets($myfile);
if (isset($_POST["number"])) {
$number = $number+1;
$myfile = fopen("line1.txt", "w") or die("Unable to open file!");
fwrite($myfile, $number);
echo $number;
return;
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input:submit').click(function(e){
e.preventDefault();
$.post(window.location, {'number': $("input#number").val()}, function(data) {
if(data) $("input#number").val(data);
$('h1').html(data);
});
return false; // just in case if e.preventDefault() fails
});
});
</script>
<title>LINE 1</title>
</head>
<body>
<div class="container">
<h1><?= $number; ?></h1>
<form method="POST">
<input type="hidden" id="number" name="number" value = "<?= $number; ?>">
<input type="submit" value = "SUIVANT >>" id="next" name="next" class="btn btn-lg btn-primary btn-block">
</form>
</div>
</body>
</html>