masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Tutorial asas pembangunan PHP AJAX dan MySQL

Instance pangkalan data AJAX

AJAX boleh digunakan untuk berkomunikasi secara interaktif dengan pangkalan data

di bawah Contoh ini akan menunjukkan cara halaman web membaca maklumat daripada pangkalan data melalui AJAX

Sila pilih pelanggan dalam senarai lungsur di sebelah kiri:

Contoh ini terdiri daripada empat elemen:

  • Pangkalan data MySQL

  • Borang HTML ringkas

  • JavaScript

  • Halaman PHP

Pangkalan Data

Contoh ini memerlukan jadual data berikut dibuat dalam pangkalan data:

70.png

Borang HTML dan JavaScript

Untuk kod sumber, lihat 1.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showUser(str){
	var xmlhttp;
	//检查是否有用户被选择
	if(str==""){
		document.getElementById("txt").innerHTML="";
		return;
	}
	//创建 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("txt").innerHTML=xmlhttp.responseText;
		}
	}
	//向服务器上的文件发送请求
	xmlhttp.open("GET","2.php?q="+str,true);
	xmlhttp.send();
}
</script>
</head>
<body>
<from>
	<!-- onchange 事件会在域的内容改变时触发
		当用户在上面的下拉列表中选择某位用户时，会执行名为 "showUser()" 的函数
	 -->
	<select name="users" onchange="showUser(this.value)">
		<option value="">选择一个人：</option>
		<option value="1">Peter Griffin</option>
		<option value="2">小 明</option>
		<option value="3">小 白</option>
	</select>
</from>
<br/>
<br/>
<div id="txt"><b>选择相应用户，用户信息将在这里展示出来</b></div>
</body>
</html>

Penjelasan kod sumber

Selepas pengguna memilih melalui senarai juntai bawah, fungsi showUser() dilaksanakan melalui acara onchange

Fungsi showUser() akan melakukan langkah berikut:

  • Semak sama ada pengguna dipilih

  • Buat objek XMLHttpRequest

  • Cipta fungsi untuk dilaksanakan apabila respons pelayan sedia

  • Hantar permintaan ke fail pada pelayan

  • Sila ambil perhatian parameter (q) yang ditambahkan pada penghujung URL (mengandungi kandungan senarai lungsur turun)

Halaman PHP

Ini di atas Halaman pelayan yang dipanggil melalui JavaScript ialah fail PHP bernama "2.php".

Kod sumber dalam "2.php" akan menjalankan pertanyaan terhadap pangkalan data MySQL dan mengembalikan keputusan dalam jadual HTML: 

<?php
header("Content-type: text/html; charset=utf-8");
$q=$_GET["q"];
//连接数据库
$con = mysqli_connect('localhost','root','root','test');
//判断是否连接成功
if(!$con){
	die('连接数据库失败：'.mysqli_error($con));
}
//选择数据库
mysqli_select_db($con,"test");
//设定字符集
mysqli_query($con,'set names utf8');
//从数据库中查出id对应的相应用户信息
$sql="SELECT * FROM customer WHERE id='".$q."'";
$result=mysqli_query($con,$sql);
echo "<table border='1' cellspacing='0' cellpadding='0'>
<tr>
<th>姓</th>
<th>名</th>
<th>年龄</th>
<th>家乡</th>
<th>工作</th>
</tr>
";
//循环显示出用信息
while($row = mysqli_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>";


?>

Pengalaman pembelajaran

Contoh ini terutamanya termasuk mata pengetahuan berikut:

  • Asas borang: pilihan lungsur turun

  • Peristiwa onchange: Berlaku apabila kandungan domain berubah

  • Panggilan fungsi, hantaran nilai fungsi

  • Penciptaan objek AJAX XMLHttpRequest, apabila pelayan bertindak balas Fungsi yang dilaksanakan, menghantar permintaan kepada fail pada pelayan: Lihat 1-5 untuk pengalaman pembelajaran

  • Kaedah HTML DOM getElementById(): Mengembalikan rujukan kepada objek pertama dengan yang ditentukan ID

  • Penciptaan pangkalan data, menyambung ke pangkalan data, memilih pangkalan data, menetapkan set aksara, membuat pertanyaan daripada pangkalan data mengikut ID, menggelung keluar kandungan pangkalan data

Fungsi berkaitan pangkalan data:

  • mysqli_connect(): Buka sambungan baharu ke pelayan MySQL

  • mysqli_error(): Kembali ke sebelumnya Mesej ralat teks yang dihasilkan oleh operasi MySQL.

  • mysqli_select_db(): digunakan untuk menukar pangkalan data lalai untuk sambungan

  • mysqli_query(): laksanakan pertanyaan terhadap pangkalan data

  • mysqli_fetch_array(): Dapatkan baris daripada set hasil sebagai tatasusunan bersekutu, tatasusunan angka atau kedua-duanya

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function showUser(str){ var xmlhttp; //检查是否有用户被选择 if(str==""){ document.getElementById("txt").innerHTML=""; return; } //创建 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("txt").innerHTML=xmlhttp.responseText; } } //向服务器上的文件发送请求 xmlhttp.open("GET","2.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <from> <!-- onchange 事件会在域的内容改变时触发 当用户在上面的下拉列表中选择某位用户时，会执行名为 "showUser()" 的函数 --> <select name="users" onchange="showUser(this.value)"> <option value="">选择一个人：</option> <option value="1">Peter Griffin</option> <option value="2">小 明</option> <option value="3">小 白</option> </select> </from> <br/> <br/> <div id="txt"><b>选择相应用户，用户信息将在这里展示出来</b></div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  493000 permainan