使用 Ajax 根据 PHP 数据在点击时更改 div 文本答案

【问题标题】：Make div text change on click based on PHP data using Ajax使用 Ajax 根据 PHP 数据在点击时更改 div 文本
【发布时间】：2012-11-10 01:49:19
【问题描述】：

假设我在一个 PHP 文件中有一个名为 myDiv 的 div、一个名为 myImg 的图像和一个名为 $x 的 PHP 变量。当有人点击myImg 时，我需要根据$x 的值更改myDiv's 文本。

例如，假设我希望 myDiv's 文本在 $x==1 时更改为 "Hello"，在 $x==2 时更改为 "Bye"。

每次文字变化，$x的值也会变化，在这种情况下，假设myImg被点击时$x==1，那么$x's的值将变为2($x=2 )，反之亦然。

我正在使用jQuery，但我读到我也需要为此使用Ajax（要在服务器上检查$x 的值），但我不知道该怎么做.我读到了Ajax，但没有一个例子解释了这样的事情。

【问题讨论】：

如果您不知道从哪里开始，但知道如何纯粹在 javascript 中执行此操作（因为您只是增加一个值），那么就这样做并发布代码。对事件进行一些相对直接的更改就足以将其转换为 Ajax。
我发布了修改后的解决方案作为新答案。

标签： php javascript jquery html ajax

【解决方案1】：

你不需要 ajax，但你可以使用它。如果您使用 AJAX，那么您将需要一个简单地回显 Hello 或 Bye 的第二个 php 文件。

第一个示例给出了您想要的结果，而不需要 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>

和 FILE2.php

$x = $_POST['myNumber'];

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

【讨论】：

您的代码构成了评估部分，但它不会更改变量的值，请记住，每次点击都会更改值，并且更改必须在服务器上。
好吧，让我来解决这个问题。我会在几分钟后发布回复。
查看新答案——我认为最好保留这个以供将来参考，而不是删除现有代码。您可能会发现 $_POST[] 分配有一天会很有用。

【解决方案2】：

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

在本例中，我们使用会话变量来存储 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() {
            $.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>

文件2.php

<?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';
}
?>

【讨论】：