Предположим, что у меня есть в файле PHP div с именем myDiv , образ под названием myImg и переменная PHP с именем $x . Когда кто-то нажимает на myImg , мне нужно изменить текст myDiv's на основе значения $x .
Например, скажем, я хочу myDiv's чтобы текст myDiv's менялся на "Hello" если $x==1 и "Bye" если $x==2 .
Каждый раз, когда текст изменяется, значение $x также изменится, в этом случае, скажем, если $x==1 при щелчке myImg , тогда значение $x's станет 2 ($ x = 2) и наоборот.
Я использую jQuery , но я читал, что мне нужно использовать Ajax для этого (чтобы проверить на сервере значение $x ), но я не могу понять, как это сделать. Я читал об Ajax , но ни один из примеров не объясняет что-то вроде этого.
Я добавлю новое решение в новый ответ, чтобы вы могли увидеть предыдущие примеры, поскольку код может предоставить полезные примеры.
В этом примере мы используем переменную сеанса для хранения значения между вызовами 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>
FILE2.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'; } ?>
Вам не нужен 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>
и FILE2.php
$x = $_POST['myNumber']; if ($x == 1) { echo 'Hello its a one'; }else{ echo 'Goodbye TWO'; }