ajax は必要ありませんが、使用できます。AJAX を使用する場合は、単に Hello または Bye をエコー バックする 2 つ目の 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';
}