[英]How to post form data from one page and retrieve it on the same page?
Index.php:
<?php
$filelike = file_get_contents("like.txt");
$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
?>
<?php
if(isset($_POST['click']))
{
$filename = "like.txt";
$content = file_get_contents($filename);
preg_match("#\d+#", $content, $before_editing);
$number_before = $before_editing[0];
file_put_contents($filename, ++$number_before);
$content = file_get_contents($filename);
preg_match("#\d+#", $content, $after_editing);
$number_after = $after_editing[0];
}
?>
<form action="" method="post">
<button name="click" class="click fa fa-heart-o" id="heart"></button>
<span id="lke"> <?php echo ($filelike) ?></span>
</form>
Like.txt:
4
这是我当前正在使用的代码。 此处发生的是,检索了文件“ like.txt”的内容(在这种情况下为4),然后将其显示在<span>标记之间的<button>下方。
例如
<span id="lke">4</span>
当用户单击<button>时,页面将刷新,“ like.txt”的内容将增加一(在这种情况下,从4增加到5)。 现在,<span>标记之间将显示5,而不是4。
但是,我不希望每次有人单击按钮时刷新页面。 我希望这一切都发生在一个过程中-用户单击按钮,并且数字增加一(全部在页面内,没有刷新)。
我尝试使用AJAX解决此问题:
<script>
$(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'like.php',
data: $('click').serialize(),
success: function () {
alert('success');
},
error: function () {
alert('error');
},
});
e.preventDefault();
});
});
</script>
Like.php:
<?php
if(isset($_REQUEST['click']))
{
$filename = "like.txt";
$content = file_get_contents($filename);
preg_match("#\d+#", $content, $before_editing);
$number_before = $before_editing[0];
file_put_contents($filename, ++$number_before);
$content = file_get_contents($filename);
preg_match("#\d+#", $content, $after_editing);
$number_after = $after_editing[0];
}
?>
添加后,整个过程停止工作,单击该按钮将显示警报消息,但是like.txt文件没有任何反应。
我该如何解决?
谢谢
<script>
$(document).ready(function () {
$('form').on('submit', function (e) {
$.ajax({
type: 'post',
url: 'like.php',
data: $('click').serialize(),
success: function (result) {
$("#lke").html(result);
},
error: function () {
alert('error');
}
});
e.preventDefault();
});
});
</script>
您会收到警报消息,因为这是成功的关键。 success:
背后的功能success:
如果获得有效输入,则执行该功能。 在这里,您必须使用新的计数器更新div。 另一件事:您的url
说'like.php'
,但您写道,该文件名为Like.php
。 在unix系统上,您将得到404 Not Found
因为unix系统区分大小写。
另一件事是第一行。 $(function
是无效的语法。而在ajax函数结束之前,您有一个逗号。
尝试打开浏览器的开发人员控制台以检查语法(错误在那里显示)。
在您的PHP脚本中,您必须回显num;)
注意:使用e.preventDefault()
不是一个好习惯。 尽量避免在大型项目中使用它。
从表单中删除action
和method
。 对请求使用客户端ajax
。
<form>
<button type="button" name="click" class="click fa fa-heart-o" id="heart"></button>
<span id="lke"> <?php echo ($filelike) ?></span>
</form>
// Wait the page to load
$(document).ready(function() {
$('#heart').on('click', function() {
var data = {
increase: true
};
$.ajax({
type: 'post',
url: 'like.php',
data: data,
success: function (data) {
// This data seems to be the increased value.
// It will be returned from the PHP code.
alert(data);
// Or
$("#lke").text(result);
},
error: function (err) {
alert(err);
},
});
});
});
});
like.php:
<?php
if(isset($_POST['increase']))
{
$filename = "like.txt";
$content = file_get_contents($filename);
// If the file will contain only the number, you do not need this.
// preg_match("#\d+#", $content, $before_editing);
$number_before = $content;
file_put_contents($filename, ++$content);
// now the $content variable is actually the updated number in the file.
// You may not need this.
// $content = file_get_contents($filename);
// preg_match("#\d+#", $content, $after_editing);
// $number_after = $after_editing[0];
// Return the updated number to the client-side
// In case many users changing this value simultaneously
// This will return the current state of like.txt
echo $content;
}
?>
是的,将文件重命名为小写。 这是一个好习惯,因为不同的系统/操作系统具有不同的含义,即如何读取文件名。
在php中,使用echo $variable
或var_dump($var)
进行调试或查看变量的状态。
UPDATE设置type="button"
阻止按钮提交表单(防止刷新页面)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.