使用Ajax基于PHP数据在单击时更改div文本

假设我在一个PHP文件中有一个名为

myDiv

的div、一个名为

myImg

的图像和一个名为

$x

的PHP变量。 当有人单击

myImg

时，我需要根据

$x

的值更改

myDiv的

文本

例如，假设我希望

myDiv的

文本在

$x==1

时变为

“Hello”

，在

$x==2

时变为

“Bye”

每次文本更改时，

$x

的值也会更改，在这种情况下，如果单击

myImg

时，

$x==1

，则

$x的值将变为
2
（$x=2），反之亦然

我正在使用
jQuery
，但是我读到我也需要使用
Ajax
（在服务器上检查
$x
的值），但是我不知道如何做。我读过关于Ajax的文章，但是没有一个例子能解释这样的事情。
你不需要Ajax，但是你可以使用它。如果您使用AJAX，那么您将需要第二个php文件来简单地回显Hello或Bye

第一个示例给出了不使用ajax时所需的结果。只需将其保存到PHP文件中并浏览到该页面：

<?php
    $x = 2;
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#myImg').click(function() {
            if (<?php echo $x;?> == 1) {
                alert ('Hello, its a one');
            }else{
                alert('Goodbye TWO');
            }
        });
    });
</script>

<div id="myDiv">
    Click on the image below:<br />
    <img id="myImg" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
</div>

我将在新的答案中添加修改后的解决方案，这样您仍然可以看到前面的示例，因为代码可能会提供有用的示例

在本例中，我们使用会话变量来存储ajax调用之间的值

FILE1.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#myImg').click(function() {
            var theNumber = $('#myInput').val();
            $.ajax({
                type: "POST",
                url: "FILE2.php",
                data: 'myNumber=' + theNumber,
                success:function(data){
                    alert(data);
                }
            });
        });
    });
</script>

<div id="myDiv">
    Enter number to send to FILE2:
    <input type="text" id="myInput"><br />
    <br />
    Click picture below to GO:<br />
    <img id="myImg" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#myImg').click(function() {
            $.ajax({
                type: "POST",
                url: "FILE2.php",
                data: '',
                success:function(data){
                    alert(data);
                }
            });
        });
    });
</script>

<div id="myDiv">
    Click picture below to GO:<br />
    <img id="myImg" src="http://www.gravatar.com/avatar/783e6dfea0dcf458037183bdb333918d?s=32&d=identicon&r=PG">
</div>


$（函数（）{
$（'#myImg'）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“FILE2.php”，
数据：“”，
成功：功能（数据）{
警报（数据）；
}
});
});
});
单击下面的图片转到：



FILE2.php

$x = $_POST['myNumber'];

if ($x == 1) {
    echo 'Hello its a one';
}else{
    echo 'Goodbye TWO';
}

<?php
session_start();

if (isset($_SESSION['myNum'])) {
    $x = $_SESSION['myNum'];
}else{
    //No session set yet, so initialize with x = 1
    $x = 1;
}

if ($x == 1) {
    $_SESSION['myNum'] = 2;
    echo 'Hello its a one';
}else{
    $_SESSION['myNum'] = 1;
    echo 'Goodbye TWO';
}
?>


如果您不知道从哪里开始，但知道如何使用javascript（因为您只是在增加一个值），那么就这样做并发布代码。对事件进行一些相对直接的更改就足以将其转换为Ajax。我发布了修订后的解决方案作为一个新的答案。您的代码是评估部分，但它不会更改变量的值，请记住，值必须随着每次单击而更改，并且更改必须在服务器上进行。好的，让我来处理这个问题。我将在几分钟后发布一个回复。请看新的答案——我认为最好将此答案保持原样以供将来参考，而不是删除现有代码。有一天，您可能会发现
$\u POST[]
作业很有用。