PHP 和 AJAX MySQL

AJAX 可用来与数据库进行交互式通信。

AJAX 数据库实例

在下面的 AJAX 实例中，我们将演示网页如何使用 AJAX 技术从 MySQL 数据库中读取信息。

在下拉列表中选择一个名字（测试说明：该实例功能未实现）

在此列出用户信息。

此列由四个元素组成：

MySQL 数据库
简单的 HTML 表单
JavaScript
PHP 页面

数据库

将在本例中使用的数据库看起来类似这样：

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

HTML 表单

上面的例子包含了一个简单的 HTML 表单，以及指向 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>

例子解释 - HTML 表单

正如您看到的，它仅仅是一个简单的 HTML 表单，其中带有名为 "users" 的下拉列表，这个列表包含了姓名，以及与数据库的 "id" 对应的选项值。

表单下面的段落包含了名为 "txtHint" 的 div。这个 div 用作从 web 服务器检索到的信息的占位符。

当用户选择数据时，执行名为 "showUser()" 的函数。该函数的执行由 "onchange" 事件触发。

换句话说：每当用户改变下拉列表中的值，就会调用 showUser() 函数。

JavaScript

这是存储在 "selectuser.js" 文件中的 JavaScript 代码：

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;
}

例子解释：

stateChanged() 和 GetXmlHttpObject 函数与 PHP AJAX 请求那一节中的相同，您可以参阅其中的相关解释。

showUser() 函数

假如下拉列表中的项目被选择，函数执行：

调用 GetXmlHttpObject 函数来创建 XMLHTTP 对象
定义发送到服务器的 URL（文件名）
向 URL 添加带有下拉列表内容的参数 (q)
添加一个随机数，以防服务器使用缓存的文件
当触发事件时调用 stateChanged
通过给定的 URL 打开 XMLHTTP 对象
向服务器发送 HTTP 请求

PHP 页面

由 JavaScript 调用的服务器页面，是名为 "getuser.php" 的简单 PHP 文件。

该页面用 PHP 编写，并使用 MySQL 数据库。

其中的代码执行针对数据库的 SQL 查询，并以 HTML 表格返回结果：

<?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);
?>

例子解释：

当查询从 JavaScript 被发送到这个 PHP 页面，会发生：

PHP 打开到达 MySQL 服务器的连接
找到拥有指定姓名的 "user"
创建表格，插入数据，然后将其发送到 "txtHint" 占位符

CODE

test.html

 1 <! DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <script src="test.js"></script>
 5 
 6 </head>
 7 
 8 
 9 <body>
10 <select name="users" onchange="showUser(this.value)">
11 <option value="1" >peter</option>
12 <option value="2">lois</option>
13 <option value="3">joseph</option>
14 
15 </select>
16 <p>
17 <div id="txtHint">info:<br/>
18 </div>
19 </p>
20 </body>
21 </html>

test.js

 1 var xmlHttp;
 2 function showUser(str) {
 3     xmlHttp=GetXmlHttpObject();
 4     if(xmlHttp == null)
 5     {        alert("not support");
 6     return;
 7     }
 8     var url = "test.php";
 9     url = url +"?q=" +str;
10     url = url +"&sid=" +Math.random();
11     xmlHttp.onreadystatechange = stateChanged;
12     xmlHttp.open("GET",url,true);
13     xmlHttp.send(null);
14     }
15 
16 
17 function stateChanged() {
18     if(xmlHttp.readyState == 4||xmlHttp.readyState == "complete")
19         document.getElementById("txtHint").innerHTML = xmlHttp.responseText;
20 }
21 
22 function GetXmlHttpObject() {
23     var xmlHttp;
24     try {
25         xmlHttp = new XMLHttpRequest();
26     }
27     catch(e) {
28         try {
29             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
30         }
31         catch(e) {
32             xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
33         }
34     }
35     return xmlHttp;
36 }

test.php

 1 <html>
 2 <head>
 3 
 4 </head>
 5 
 6 
 7 <body>
 8 
 9 <?php 
10 $q = $_GET['q'];
11 
12 $con = mysql_connect("localhost","root","123456");
13 if(!$con)
14     alert("not connect".mysql_error);
15 mysql_select_db("test",$con);
16 $sql = "select * from ranking where Id='$q'";
17 $result = mysql_query($sql);
18 while($row = mysql_fetch_array($result))
19 {
20     echo "id:".$q."====".$row['Id']."<br/>FName:".$row['FName']."<br/>Age:".$row['Age']."<br/>";
21 }
22 
23 
24 mysql_close();
25     
26 function Alert($Str,$Typ="back",$TopWindow="",$Tim=100){
27 echo "<script>".chr(10);
28   if(!empty($Str)){
29     echo "alert("Warning:\n\n{$Str}\n\n");".chr(10);
30   }
31   echo "function _r_r_(){";
32   $WinName=(!empty($TopWindow))?"top":"self";
33   switch (StrToLower($Typ)){
34   case "#":
35     break;
36   case "back":
37     echo $WinName.".history.go(-1);".chr(10);
38     break;
39   case "reload":
40     echo $WinName.".window.location.reload();".chr(10);
41     break;
42   case "close":
43     echo "window.opener=null;window.close();".chr(10);
44     break;
45   case "function":
46     echo "var _T=new function('return {$TopWindow}')();_T();".chr(10);
47     break;
48     //Die();
49   Default:
50     if($Typ!=""){
51       //echo "window.{$WinName}.location.href='{$Typ}';";
52       echo "window.{$WinName}.location=('{$Typ}');";
53     }
54   }
55   echo "}".chr(10);
56   //為防止Firefox不執行setTimeout
57   echo "if(setTimeout("_r_r_()",".$Tim.")==2){_r_r_();}";
58   if($Tim==100){
59     echo "_r_r_();".chr(10);
60   }else{
61     echo "setTimeout("_r_r_()",".$Tim.");".chr(10);
62   }
63   echo "</script>".chr(10);
64   Exit();
65 }
66 ?>
67 </body>
68 </html>

MySQL 预配置

相关阅读:
WebClient设置Expect: 100-continue
ActiveX控件注册不起作用的解决办法
 RadioButtonFor值为false.默认选中的问题
 Ueditor插入script标签
 Ueditor上传图片到本地改造到上传图片到七牛云存储
 让网页显示ajax的查询数据
 今天升级win10.vs调试程序各种崩溃
 visual assist x vs2012不智能提示
 几道 javascript 题，你全对了吗？
Node.js中使用TCP套接字编程
原文地址：https://www.cnblogs.com/ouyangping/p/6351348.html

PHP 和 AJAX MySQL

AJAX 数据库实例

在下拉列表中选择一个名字 （测试说明：该实例功能未实现）

数据库

HTML 表单

例子解释 - HTML 表单

JavaScript

例子解释：

showUser() 函数

PHP 页面

例子解释：

在下拉列表中选择一个名字（测试说明：该实例功能未实现）