ホームページ > 記事 > バックエンド開発 > PHPとAjaxを組み合わせて投票機能を実装

PHPとAjaxを組み合わせて投票機能を実装

墨辰丷オリジナル: 2018-06-07 10:53:341269ブラウズ

この記事では主に PHP と Ajax を組み合わせた投票機能の実装について紹介します。興味のある方はぜひ参考にしてください。

この AJAX の例では、Web ページがリロードせずに結果を取得できるようにする投票プログラムを示します。

この例には 4 つの要素が含まれています:

① HTML フォーム
② JavaScript
③ PHP ページ
④ 結果を保存するテキストファイル

1. HTML フォーム

これは HTML ページです。これには、単純な HTML フォームと JavaScript ファイルへの接続が含まれています:

<html>
<head>
<script src="poll.js"></script> 
</head>
<body>
<p id="poll">
<h2>Do you like PHP and AJAX so far?</h2>
<form>
Yes: 
<input type="radio" name="vote" 
value="0" onclick="getVote(this.value)">
<br />
No: 
<input type="radio" name="vote" 
value="1" onclick="getVote(this.value)">
</form>
</p>
</body>
</html>

例の説明 - HTML フォーム

ご覧のとおり、上記の HTML ページには、e388a4556c0f65e1904146cc1a846bee 要素を持つ単純な HTML フォームが含まれています。。

フォームは次のように機能します:

1. ユーザーが「はい」または「いいえ」を選択すると、イベントがトリガーされます
2. イベントがトリガーされると、getVote() 関数が実行されます
3. form は e388a4556c0f65e1904146cc1a846bee の「poll」という名前のメッセージです。 getVote() 関数からデータが返されると、返されたデータがフォームを置き換えます。

2. テキストファイル

テキストファイル (poll_result.txt) には、投票プログラムからのデータが保存されます。

次のようになります:

0||0
最初の数字は「はい」の投票を表し、2 番目の数字は「いいえ」の投票を表します。

注: このテキストファイルの編集は Web サーバーのみに許可してください。 Web サーバー (PHP) 以外にはアクセスを許可しないでください。

3. JavaScript

JavaScript コードは「poll.js」に保存され、HTML ドキュメントに接続されます:

var xmlHttp
function getVote(int)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
 alert ("Browser does not support HTTP Request")
 return
} 
var url="poll_vote.php"
url=url+"?vote="+int
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("poll").
 innerHTML=xmlHttp.responseText;
 } 
} 
function GetXmlHttpObject()
{ 
var objXMLHttp=null
if (window.XMLHttpRequest)
{
 objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}

例の説明:

stateChanged() 関数と GetXmlHttpObject 関数は PHP および AJAX リクエストで使用されますセクションの例と同じです。

getVote()関数

この関数は、ユーザーがHTMLフォームで「はい」または「いいえ」を選択したときに実行されます。

1. サーバーに送信する URL (ファイル名) を定義します
2. 入力フィールドの内容を含むパラメーター (投票) を追加します
3. サーバーがキャッシュされたファイルを使用しないようにするための乱数を追加します
4 GetXmlHttpObject 関数を呼び出して XMLHTTP オブジェクトを作成し、変更がトリガーされたときに stateChanged 関数を実行するようにオブジェクトに指示します
5. 指定された URL を使用して XMLHTTP オブジェクトを開きます

6. 4. PHP ページ

JavaScript コードによって呼び出されるサーバーページは、「poll_vote.php」という名前の単純な PHP ファイルです。

<?php
$vote = $_REQUEST[&#39;vote&#39;];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0)
{
 $yes = $yes + 1;
}
if ($vote == 1)
{
 $no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Result:</h2>
<table>
<tr>
<td>Yes:</td>
<td>
<img src="poll.gif"
width=&#39;<?php echo(100*round($yes/($no+$yes),2)); ?>&#39;
height=&#39;20&#39;>
<?php echo(100*round($yes/($no+$yes),2)); ?>%
</td>
</tr>
<tr>
<td>No:</td>
<td>
<img src="poll.gif" 
width=&#39;<?php echo(100*round($no/($no+$yes),2)); ?>&#39;
height=&#39;20&#39;>
<?php echo(100*round($no/($no+$yes),2)); ?>%
</td>
</tr>
</table>

例の説明:

選択された値が JavaScript から渡されると、次のことが起こります:

1. 「poll_result.txt」ファイルの内容を取得します

2. ファイルの内容を変数に入れて追加します。 1. 変数が蓄積されます
3. 結果を「poll_result.txt」ファイルに書き込みます
4. グラフの投票結果を出力します

概要: 以上がこの記事の内容です。みんなの学習に役立つでしょう。

PHPとAjaxを組み合わせて投票機能を実装

関連記事