PHP 開発の基本チュートリアル AJAX 投票
AJAX Voting
次の例では、Web ページを更新せずに投票結果を表示する投票プログラムを示します。
ページの表示については右の図を参照してください
ユーザーが上記のオプションのいずれかを選択すると、「getVote()」という名前の関数が実行されます。この関数は「onclick」イベントによってトリガーされます。
この例には 3 つの部分が含まれています
HTML フォーム
PHP ファイル
TXT ファイル
HTML ファイル:
ソースコードは1にあります。 php<html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script> function getVote(int) { //创建 XMLHttpRequest 对象 if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //创建在服务器响应就绪时执行的函数 xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("poll").innerHTML=xmlhttp.responseText; } } //向服务器上的文件发送请求 xmlhttp.open("GET","2.php?vote="+int,true); xmlhttp.send(); } </script> </head> <body> <div id="poll"> <h3>你喜欢 PHP 和 AJAX 吗?</h3> <!-- 用户选择一个选项,触发onclick事件,执行getVote()函数 --> <form> 是: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"> <br>否: <input type="radio" name="vote" value="1" onclick="getVote(this.value)"> </form> </div> </body> </html>上 HTML ページには、<div> 要素内に 2 つのラジオ ボタンがある単純な HTML フォームが含まれています。 フォームは次のように機能します:
- ユーザーが「はい」または「いいえ」を選択すると、イベントがトリガーされます
- イベントがトリガーされると、getVote()関数が実行されます
- フォームは「poll」の名前 です。 getVote() 関数からデータが返されると、返されたデータがフォームを置き換えます。 getVote() 関数は次の手順を実行します:
- XMLHttpRequest オブジェクトを作成する
- サーバー応答の準備ができたときに実行する関数を作成する
- サーバー上のファイルにリクエストを送信する
- URLの末尾にパラメータ(q)が追加されていることに注意してください(ドロップダウンリストの内容を含む)
PHPファイル:
JavaScriptを介して上記で呼び出されるサーバーページは次のとおりです。 「2.php」という名前の PHP ファイル:<?php //过滤浏览器传过来的数据 $vote = htmlspecialchars($_REQUEST['vote']); // 获取文件中存储的数据 $filename = "3.txt"; $content = file($filename); // 将数据分割到数组中 $array = explode("||", $content[0]); $yes = $array[0]; $no = $array[1]; if ($vote == 0) { $yes = $yes + 1; } if ($vote == 1) { $no = $no + 1; } // 插入投票数据 $insertvote = $yes."||".$no; $fp = fopen($filename,"w");//写入方式打开 fputs($fp,$insertvote);//将$insertvote写入文件中 fclose($fp);//关闭打开文件 ?> <h2>结果:</h2> <table> <tr> <td>是:</td> <td> <span style="display: inline-block; background-color:green; width:<?php echo(100*round($yes/($no+$yes),2)); ?>px; height:20px;" ></span> <?php echo(100*round($yes/($no+$yes),2)); ?>% </td> </tr> <tr> <td>否:</td> <td> <span style="display: inline-block; background-color:red; width:<?php echo(100*round($no/($no+$yes),2)); ?>px; height:20px;"></span> <?php echo(100*round($no/($no+$yes),2)); ?>% </td> </tr> </table>
選択した値が JavaScript から PHP ファイルに送信されると、何が起こります:- 「poll_result.txt」ファイルの内容を取得します
- ファイルの内容を変数に変換し、選択した変数に追加します 1
- 結果を「poll_result.txt」ファイルに書き込みます
- グラフィカルな投票結果を出力します
TXT ファイルを出力します テキスト ファイル (3.txt) には、投票プログラムの結果データが保存されます。
次のようになります:
0||0
最初の数字は「はい」の投票を表し、2 番目の数字は「いいえ」の投票を表します。
注: このテキスト ファイルの編集は Web サーバーのみに許可してください。 Web サーバー (PHP) 以外にはアクセスを許可しないでください。学習体験 この例には主に次の知識ポイントが含まれています:
- フォームの基本: ラジオボタン
- onclick イベント: onクリックすると発生します
関数呼び出し、関数値の転送
AJAX XMLHttpRequest オブジェクトの作成、サーバーが応答したときに実行される関数、サーバー上のファイルへのリクエストの送信: 学習体験については 1 ~ 5 を参照してください
HTML DOM getElementById ()メソッド: 指定された ID を持つ最初のオブジェクトへの参照を返します
ファイルに対する PHP 関連の操作:
file(): ファイル全体を配列に読み取ります
fopen() : ファイルを開くか、 URL
fputs(): ファイルを書き込みます
fclose(): 開いているファイルを閉じます
関連関数:
htmlspecialchars(): 事前定義された文字を HTML エンティティに変換します
爆発(): 文字列を配列に分割します