Question

我有一个PHP脚本，可以将按钮点击计入txt文件。这工作得很好。
在我的html页面上，我正在显示点击次数：

<?php
include ('counter.php');
?>
<div class="count_right" id="one"></div>
<div class="count_left" id="two"></div>
<form action="" method="post" id="form" >
<button class="vote_right"  name="clicks1" ></button>
</form>
<form action="" method="post" id="form2"  >
<button class="vote_left"  name="clicks2"></button>
</form>

php

<?php
if( isset($_POST['clicks1']) ) { 
incrementClickCount1();
}

function getClickCount1()
{
return (int)file_get_contents("count_files/clickcount1.txt");
}

function incrementClickCount1()
{
$count = getClickCount1() + 1;
file_put_contents("count_files/clickcount1.txt", $count);
}


if( isset($_POST['clicks2']) ) { 
incrementClickCount2();
}

function getClickCount2()
{
return (int)file_get_contents("count_files/clickcount2.txt");
}

function incrementClickCount2()
{
$count2 = getClickCount2() + 1;
file_put_contents("count_files/clickcount2.txt", $count2);
}
?>

和js（EDITED）

<script type="text/javascript">
var valueOne = "<?php echo getClickCount1(); ?>";
var valueTwo = "<?php echo getClickCount2(); ?>"; 
 $('#one').html(valueOne);
 $('#two').html(valueTwo);
 $('.vote_right').click(function(){

$.ajax({
 type: "POST",
 url: "counter.php",
 data: valueOne,
 cache: false,

 success: function(data)
 {
 $("#one").html(data);

 }  });                         

 </script>

还尝试添加

e.preventDefault();

然后按钮不起作用。我的问题是我不想在点击按钮时刷新页面。 insted我希望div用新数据刷新。
我试过用ajax但没有成功。它的页面刷新或数据不会更新。
有什么建议？

Answer 1

使用type =按钮在单击按钮时不提交表单（从而阻止页面重新加载）。

<button type="button" class="vote_right" name="clicks1" ></button>

Answer 2

下面显示了如何编写需要添加到网站的4个api呼叫中的两个。

主页：

<?php
    include ('counter.php');
?>
<div class="count_right" id="one"></div>
<div class="count_left" id="two"></div>
<button class="vote_right"  name="clicks1" onclick="addCount1()"></button>
<button class="vote_left"  name="clicks2" onclick="addCount2()"></button>

<强> JS：

<script type="text/javascript">
    var valueOne = //use ajax (GET) to call the page for count1;
    var valueTwo = //use ajax (GET) to call the page for count2;

    $(document).ready(function(){
        $('#one').html(valueOne);
        $('#two').html(valueTwo);
    });

    function addCount1(){
        //use ajax (POST/PUT) to call a page that adds 1 to your text file thing for count1
    }

    function addCount2(){
        //use ajax (POST/PUT) to call a page that adds 1 to your text file thing for count2
    }
</script>

新的API页面（针对count1）：

<?php
    class IntegerValue implements JsonSerializable {
        public function __construct($number) {
            $this->number = (integer) $number;
        }

        public function jsonSerialize() {
            return $this->number;
        }
    }

    echo json_encode(new IntegerValue(getClickCount1()), JSON_PRETTY_PRINT);
?>

新的API页面（针对count2）：

<?php
    class IntegerValue implements JsonSerializable {
        public function __construct($number) {
            $this->number = (integer) $number;
        }

        public function jsonSerialize() {
            return $this->number;
        }
    }

    echo json_encode(new IntegerValue(getClickCount2()), JSON_PRETTY_PRINT);
?>

PHP和JavaScript如何工作

在初始页面加载时：流程如下所示：

服务器端代码（php） - ＆gt;将数据发送到客户端 - ＆gt;浏览器开始渲染并执行JS

表格提交：

客户端执行代码（javascript） - ＆gt;将数据发送到服务器 - ＆gt;服务器获取数据和进程（PHP）

因此，如果您不希望页面“刷新”，则必须使用JavaScript，如果使用表单，最好的处理方法是AJAX，您将获得更新也称为POST-BACK。如果使用AJAX，您可以轻松发送POST或GET，但不会刷新。

Answer 3

无需在表单标记中加入ajax异步请求。

仅限使用

<?php
include ('counter.php');
?>
<div class="count_right" id="one"></div>
<div class="count_left" id="two"></div>
<button class="vote_right"  name="clicks1" ></button>
<button class="vote_left"  name="clicks2"></button>

更新div而不刷新页面

3 个答案: