(转)PHP and AJAX MySQL Database Example-php教程-PHP中文网

(转)PHP and AJAX MySQL Database Example

php中文网

发布： 2016-06-23 14:33:10

原创

1063人浏览过

立即学习“PHP免费学习笔记（深入）”；

引用地址:http://www.w3schools.com/PHP/php_ajax_database.asp

立即学习“PHP免费学习笔记（深入）”；

AJAX can be used for interactive communication with a database.

立即学习“PHP免费学习笔记（深入）”；

AJAX Database Example

In the AJAX example below we will demonstrate how a web page can fetch information from a MySQL database using AJAX technology.

立即学习“PHP免费学习笔记（深入）”；

Select a Name in the Box Below

微软文字转语音

微软文本转语音，支持选择多种语音风格，可调节语速。

查看详情

Select a User: Peter Griffin Lois Griffin Joseph Swanson Glenn Quagmire

User info will be listed here.

This example consists of four elements:

a MySQL database a simple HTML form a JavaScript a PHP page

立即学习“PHP免费学习笔记（深入）”；

The Database

The database we will be using in this example looks like this:

id FirstName LastName Age Hometown Job

1	Peter	Griffin	41	Quahog	Brewery
2	Lois	Griffin	40	Newport	Piano Teacher
3	Joseph	Swanson	39	Quahog	Police Officer
4	Glenn	Quagmire	41	Quahog	Pilot

立即学习“PHP免费学习笔记（深入）”；

The HTML Form

The example above contains a simple HTML form and a link to a JavaScript:

<html>            <head>            <script src="selectuser.js"></script>            </head>            <body>

登录后复制

<form>            Select a User:            <select name="users" onchange="showUser(this.value)">            <option value="1">Peter Griffin</option>            <option value="2">Lois Griffin</option>            <option value="3">Glenn Quagmire</option>            <option value="4">Joseph Swanson</option>            </select>            </form>

登录后复制

<p>            <div id="txtHint"><b>User info will be listed here.</b></div>            </p>

登录后复制

</body>            </html>

登录后复制

Example Explained - The HTML Form

As you can see it is just a simple HTML form with a drop down box called "users" with names and the "id" from the database as option values.

The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.

When the user selects data, a function called "showUser()" is executed. The execution of the function is triggered by the "onchange" event.

In other words: Each time the user changes the value in the drop down box, the function showUser() is called.

立即学习“PHP免费学习笔记（深入）”；

The JavaScript

This is the JavaScript code stored in the file "selectuser.js":

var xmlHttp

登录后复制

function showUser(str)            {            xmlHttp=GetXmlHttpObject()            if (xmlHttp==null)            {            alert ("Browser does not support HTTP Request")            return            }            var url="getuser.php"            url=url+"?q="+str            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("txtHint").innerHTML=xmlHttp.responseText            }            }

登录后复制

function GetXmlHttpObject()            {            var xmlHttp=null;            try            {            // Firefox, Opera 8.0+, Safari            xmlHttp=new XMLHttpRequest();            }            catch (e)            {            //Internet Explorer            try            {            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");            }            catch (e)            {            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");            }            }            return xmlHttp;            }

登录后复制

Example Explained

The stateChanged() and GetXmlHttpObject functions are the same as in the PHP AJAX Suggest chapter, you can go to there for an explanation of those.

The showUser() Function

If an item in the drop down box is selected the function executes the following:

Calls on the GetXmlHttpObject function to create an XMLHTTP object Defines the url (filename) to send to the server Adds a parameter (q) to the url with the content of the dropdown box Adds a random number to prevent the server from using a cached file Call stateChanged when a change is triggered Opens the XMLHTTP object with the given url. Sends an HTTP request to the server

立即学习“PHP免费学习笔记（深入）”；

The PHP Page

The server page called by the JavaScript, is a simple PHP file called "getuser.php".

The page is written in PHP and uses a MySQL databse.

The code runs a SQL query against a database and returns the result as an HTML table:

<?php            $q=$_GET["q"];            $con = mysql_connect('localhost', 'peter', 'abc123');            if (!$con)            {            die('Could not connect: ' . mysql_error());            }            mysql_select_db("ajax_demo", $con);            $sql="SELECT * FROM user WHERE id = '".$q."'";            $result = mysql_query($sql);            echo "<table border='1'>            <tr>            <th>Firstname</th>            <th>Lastname</th>            <th>Age</th>            <th>Hometown</th>            <th>Job</th>            </tr>";            while($row = mysql_fetch_array($result))            {            echo "<tr>";            echo "<td>" . $row['FirstName'] . "</td>";            echo "<td>" . $row['LastName'] . "</td>";            echo "<td>" . $row['Age'] . "</td>";            echo "<td>" . $row['Hometown'] . "</td>";            echo "<td>" . $row['Job'] . "</td>";            echo "</tr>";            }            echo "</table>";            mysql_close($con);            ?>

登录后复制

Example Explained

When the query is sent from the JavaScript to the PHP page the following happens:

PHP opens a connection to a MySQL server The "user" with the specified name is found A table is created and the data is inserted and sent to the "txtHint" placeholder

大家都在看：

PHP对象克隆：理解引用与复制，保留独立状态怎么用php用post_PHP POST请求方法与表单提交实现教程 PHP复杂数组数据提取与显示教程 PHP应用中安全管理SMTP密码的策略与实践解决PHP登录重定向失败问题：原理与最佳实践