목차
Do you like PHP and AJAX so far?
Result:
백엔드 개발 PHP 튜토리얼 PHP 和 AJAX 投票

PHP 和 AJAX 投票

Jun 23, 2016 pm 02:31 PM

AJAX 投票

在这个 AJAX 实例中,我们将演示一个投票程序,网页在不重新加载的情况下,就可以获得结果。

到目前为止,您喜欢 PHP 和 AJXA 吗? Yes:
No:

本例包括四个元素:

HTML 表单 JavaScript PHP 页面 存放结果的文本文件

HTML 表单

这是 HTML 页面。它包含一个简单的 HTML 表单,以及一个与 JavaScript 文件的连接:

<html><head><script src="poll.js"></script> </head><body><div id="poll"><h2 id="Do-you-like-PHP-and-AJAX-so-far">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></div></body></html>
로그인 후 복사
例子解释 - HTML 表单

正如您看到的,上面的 HTML 页面包含一个简单的 HTML 表单,其中的

元素带有两个单选按钮。

表单这样工作:

当用户选择 "yes" 或 "no" 时,会触发一个事件 当事件触发时,执行 getVote() 函数 围绕该表单的是名为 "poll" 的
。当数据从 getVote() 函数返回时,返回的数据会替代该表单。

文本文件

文本文件 (poll_result.txt) 中存储来自投票程序的数据。

它类似这样:

0||0
로그인 후 복사

第一个数字表示 "Yes" 投票,第二个数字表示 "No" 投票。

注释:记得只允许您的 web 服务器来编辑该文本文件。不要让其他人获得访问权,除了 web 服务器 (PHP)。

JavaScript

JavaScript 代码存储在 "poll.js" 中,并于 HTML 文档相连接:

var xmlHttpfunction getVote(int){xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="poll_vote.php"url=url+"?vote="+inturl=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=nullif (window.XMLHttpRequest) { objXMLHttp=new XMLHttpRequest() }else if (window.ActiveXObject) { objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP") }return objXMLHttp}
로그인 후 복사
例子解释:

stateChanged() 和 GetXmlHttpObject 函数与 PHP 和 AJAX 请求 这一节中的例子相同。

getVote() 函数

当用户在 HTML 表单中选择 "yes" 或 "no" 时,该函数就会执行。

定义发送到服务器的 url (文件名) 向 url 添加参数 (vote),参数中带有输入字段的内容 添加一个随机数,以防止服务器使用缓存的文件 调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象,并告知该对象当触发一个变化时执行 stateChanged 函数 用给定的 url 来打开 XMLHTTP 对象 向服务器发送 HTTP 请求

PHP 页面

由 JavaScript 代码调用的服务器页面是名为 "poll_vote.php" 的一个简单的 PHP 文件。

<?php$vote = $_REQUEST['vote'];//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 id="Result">Result:</h2><table><tr><td>Yes:</td><td><img  src="/static/imghw/default1.png"  data-src="poll.gif"  class="lazy"   style="max-width:90%"PHP 和 AJAX 投票" >' style="max-width:90%"><?php echo(100*round($yes/($no+$yes),2)); ?>%</td></tr><tr><td>No:</td><td><img  src="/static/imghw/default1.png"  data-src="poll.gif"  class="lazy"    style="max-width:90%"PHP 和 AJAX 投票" >' style="max-width:90%"><?php echo(100*round($no/($no+$yes),2)); ?>%</td></tr></table>
로그인 후 복사
例子解释:

所选的值从 JavaScript 传来,然后会发生:

获取 "poll_result.txt" 文件的内容 把文件内容放入变量,并向被选变量累加 1 把结果写入 "poll_result.txt" 文件 输出图形化的投票结果
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

11 최고의 PHP URL 쇼트너 스크립트 (무료 및 프리미엄) 11 최고의 PHP URL 쇼트너 스크립트 (무료 및 프리미엄) Mar 03, 2025 am 10:49 AM

11 최고의 PHP URL 쇼트너 스크립트 (무료 및 프리미엄)

Laravel의 플래시 세션 데이터로 작업합니다 Laravel의 플래시 세션 데이터로 작업합니다 Mar 12, 2025 pm 05:08 PM

Laravel의 플래시 세션 데이터로 작업합니다

Laravel 테스트에서 단순화 된 HTTP 응답 조롱 Laravel 테스트에서 단순화 된 HTTP 응답 조롱 Mar 12, 2025 pm 05:09 PM

Laravel 테스트에서 단순화 된 HTTP 응답 조롱

Laravel Back End : Part 2, React가있는 React 앱 구축 Laravel Back End : Part 2, React가있는 React 앱 구축 Mar 04, 2025 am 09:33 AM

Laravel Back End : Part 2, React가있는 React 앱 구축

Instagram API 소개 Instagram API 소개 Mar 02, 2025 am 09:32 AM

Instagram API 소개

PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법 PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법 Mar 14, 2025 am 11:42 AM

PHP의 컬 : REST API에서 PHP Curl Extension 사용 방법

Codecanyon에서 12 개의 최고의 PHP 채팅 스크립트 Codecanyon에서 12 개의 최고의 PHP 채팅 스크립트 Mar 13, 2025 pm 12:08 PM

Codecanyon에서 12 개의 최고의 PHP 채팅 스크립트

라 라벨에서 알림 라 라벨에서 알림 Mar 04, 2025 am 09:22 AM

라 라벨에서 알림

See all articles