AJAX处理php文件示例

最新推荐文章于 2024-09-02 10:23:11 发布

单眼皮的小熊

最新推荐文章于 2024-09-02 10:23:11 发布

阅读量396

点赞数

分类专栏： phpstudy javascript 文章标签： php ajax

本文链接：https://blog.csdn.net/z858466/article/details/72230551

版权

javascript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

phpstudy

8 篇文章 0 订阅

订阅专栏

一个下拉框，根据选择项，和数据库进行比对，最后传回来相应的提示信息，
首先配置数据库（学习用的wamp的mysql）示例：

create database ajax charset=utf8;
use ajax;
create table user(
	id int auto_increment comment 'id',
	firstname varchar(20) not null,
	lastname varchar(20) not null ,
	age int not null,
	hometown varchar(20) not null ,
	job varchar(20),
	primary key(id)
)charset=utf8;


insert  user(firstname,lastname,age,hometown,job)
value
('Peter', 'Griffin',41,'Quahog','Brewery'),
('Lois' ,  'Griffin',40,'Newport','Piano Teacher'),
('Joseph','Swanson',39,'Quahog','Police Officer'),
('Glenn' ,'Quagmire',41,'Quahog','Pilot');

然后php代码如下：

<?php
header("Content-Type:text/html;Charset=utf-8");
$q=$_GET['q'];

//连接数据库
$conn=mysqli_connect('localhost:3306','root','');
if(!$conn){
	die('数据库连接失败'.mysql_error($conn));
};
mysqli_query($conn,'use ajax');
$sql="select * from user where id=$q";
$result=mysqli_query($conn,$sql);
$row= mysqli_fetch_assoc($result);
$row=json_encode($row);//转成JSON形式字符串

echo ($row);

mysqli_close($conn);
?>

最后附上html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 style="font-size: 100px;text-align: center;">AJAX</h1>
		<form>
			<select name="users" onchange="showUser(this.value)">
				<option value="">Select a person:</option>
				<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>
		<br>
		<div id="txtHint">
			<b>Person info will be listed here.</b>
		</div>
		<hr />
		<table border="1" cellpadding="5" cellspacing="0">
			<thead>
				<tr>
					<td>FirstName</td>
					<td>LastName</td>
					<td>age</td>
					<td>hometown</td>
					<td>job</td>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<script>
			var tbody=document.getElementsByTagName('tbody')[0];
			var str='';
			function showUser(str){
				//检查是否有用户被选择
				if (str==""){
					tbody.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){
						//把字符串转为json 对象
						var data=JSON.parse(xmlhttp.responseText);
						tbody.innerHTML ='<tr><td>'+data['firstname']+'</td><td>'+data['LastName']+'</td><td>'+data['age']+'</td><td>'+data['hometown']+'</td><td>'+data['job']+'</td></tr>';//当然，数据多可以用for in遍历
					}
				}
				//请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）
				xmlhttp.open("GET","9.php?q="+str,true);
				//向服务器上的文件发送请求
				xmlhttp.send();
//		如果是用post：
/*
//创建一个请求
		xmlhttp.open('post',"./9.php?",true);
		//设置http头协议信息
		xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
		var info="q="+str;
//发送请求
		xmlhttp.send(info);
		
*/
			}	
		</script>
	</body>
</html>

单眼皮的小熊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX处理php文件示例

首先配置数据库（学习用的wrap的mysql）示例：create database ajax charset=utf8;use ajax;create table user( id int auto_increment comment 'id', firstname varchar(20) not null, lastname varchar(20) not null ,
复制链接

扫一扫

专栏目录