首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

AJAX 数据库操作实例

AJAX(Asynchronous JavaScript and XML)是一种用于创建快速动态网页的技术。它通过在后台与服务器进行少量数据交换,可以使网页实现异步更新,避免了整个页面的重新加载,提高了用户体验。

数据库操作是指对数据库中的数据进行增删改查等操作。常用的数据库有MySQL、Oracle、SQL Server等。

在前端开发中,我们经常需要通过AJAX技术与后端进行数据交互,而数据库操作则是后端开发的重要部分。下面是一个简单的AJAX数据库操作实例:

HTML代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
	<title>AJAX数据库操作实例</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<h1>用户列表</h1>
	<table id="userTable">
		<tr>
			<th>编号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>性别</th>
		</tr>
	</table>
	<button id="addUser">添加用户</button>
	<script>
		$(function(){
			// 页面加载时获取用户列表
			$.ajax({
				url: "getUserList.php",
				type: "GET",
				dataType: "json",
				success: function(data){
					$.each(data, function(index, item){
						var tr = "<tr><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.age+"</td><td>"+item.gender+"</td></tr>";
						$("#userTable").append(tr);
					});
				}
			});

			// 添加用户
			$("#addUser").click(function(){
				var name = prompt("请输入姓名:");
				var age = prompt("请输入年龄:");
				var gender = prompt("请输入性别:");
				$.ajax({
					url: "addUser.php",
					type: "POST",
					data: {"name": name, "age": age, "gender": gender},
					dataType: "json",
					success: function(data){
						if(data.code == 0){
							alert("添加成功!");
							location.reload();
						}else{
							alert("添加失败:"+data.msg);
						}
					}
				});
			});
		});
	</script>
</body>
</html>

getUserList.php代码:

代码语言:txt
复制
<?php
// 连接数据库
$conn = mysqli_connect("localhost", "root", "123456", "test");
if(!$conn){
	die("连接失败:".mysqli_connect_error());
}

// 查询用户列表
$sql = "SELECT * FROM user";
$result = mysqli_query($conn, $sql);
if(mysqli_num_rows($result) > 0){
	$userList = array();
	while($row = mysqli_fetch_assoc($result)){
		$userList[] = $row;
	}
	echo json_encode($userList);
}else{
	echo json_encode(array());
}

// 关闭数据库连接
mysqli_close($conn);
?>

addUser.php代码:

代码语言:txt
复制
<?php
// 连接数据库
$conn = mysqli_connect("localhost", "root", "123456", "test");
if(!$conn){
	die("连接失败:".mysqli_connect_error());
}

// 获取参数
$name = $_POST["name"];
$age = $_POST["age"];
$gender = $_POST["gender"];

// 插入数据
$sql = "INSERT INTO user(name, age, gender) VALUES('$name', $age, '$gender')";
if(mysqli_query($conn, $sql)){
	echo json_encode(array("code"=>0, "msg"=>""));
}else{
	echo json_encode(array("code"=>-1, "msg"=>mysqli_error($conn)));
}

// 关闭数据库连接
mysqli_close($conn);
?>

优势:AJAX可以实现异步更新,提高用户体验;数据库操作可以对数据进行增删改查等操作,方便数据管理。

类型:AJAX是一种前端技术,数据库操作是后端技术。

应用场景:AJAX可以用于网页的动态更新,数据库操作可以用于数据管理。

遇到问题想要了解原因和解决方法:常见的问题包括AJAX跨域问题、数据库连接失败等。AJAX跨域问题可以通过设置响应头或者使用JSONP解决;数据库连接失败可以检查数据库配置是否正确、数据库是否启动等。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

共30个视频
web前端进阶教程-轻松玩转AJAX技术【动力节点】
动力节点Java培训
传统开发的缺点,是对于浏览器的页面,全部都是全局刷新的体验。如果我们只是想取得或是更新页面中的部分信息那么就必须要应用到局部刷新的技术。局部刷新也是有效提升用户体验的一种非常重要的方式。 本课程会通过对ajax的传统使用方式,结合json操作的方式,结合跨域等高级技术的方式,对ajax做一个全面的讲解。
共29个视频
【动力节点】JDBC核心技术精讲视频教程-jdbc基础教程
动力节点Java培训
本套视频教程中讲解了Java语言如何连接数据库,对数据库中的数据进行增删改查操作,适合于已经学习过Java编程基础以及数据库的同学。Java教程中阐述了接口在开发中的真正作用,JDBC规范制定的背景,JDBC编程六部曲,JDBC事务,JDBC批处理,SQL注入,行级锁等。
共50个视频
动力节点-【CRM客户管理系统】SSM框架项目实战教程-1
动力节点Java培训
这套教程是动力节点最新录制的CRM项目,课程主要针对核心的客户关系管理业务功能进行实现,让你能够深层掌握主流SSM框架、Linux操作系统下部署项目、数据库设计原则和技巧、数据如何通过图表在页面展示、Java对excel文件的处理,学会使用项目管理工具Maven、版本控制工具Git,以及缓存在项目中的运用熟悉前端开发技术及常见的特效等。 通过课程可以了解项目开发流程及项目开发各阶段主要文档及产出物
共50个视频
动力节点-【CRM客户管理系统】SSM框架项目实战教程-2
动力节点Java培训
这套教程是动力节点最新录制的CRM项目,课程主要针对核心的客户关系管理业务功能进行实现,让你能够深层掌握主流SSM框架、Linux操作系统下部署项目、数据库设计原则和技巧、数据如何通过图表在页面展示、Java对excel文件的处理,学会使用项目管理工具Maven、版本控制工具Git,以及缓存在项目中的运用熟悉前端开发技术及常见的特效等。 通过课程可以了解项目开发流程及项目开发各阶段主要文档及产出物
共50个视频
动力节点-【CRM客户管理系统】SSM框架项目实战教程-3
动力节点Java培训
这套教程是动力节点最新录制的CRM项目,课程主要针对核心的客户关系管理业务功能进行实现,让你能够深层掌握主流SSM框架、Linux操作系统下部署项目、数据库设计原则和技巧、数据如何通过图表在页面展示、Java对excel文件的处理,学会使用项目管理工具Maven、版本控制工具Git,以及缓存在项目中的运用熟悉前端开发技术及常见的特效等。 通过课程可以了解项目开发流程及项目开发各阶段主要文档及产出物
共18个视频
动力节点-【CRM客户管理系统】SSM框架项目实战教程-4
动力节点Java培训
这套教程是动力节点最新录制的CRM项目,课程主要针对核心的客户关系管理业务功能进行实现,让你能够深层掌握主流SSM框架、Linux操作系统下部署项目、数据库设计原则和技巧、数据如何通过图表在页面展示、Java对excel文件的处理,学会使用项目管理工具Maven、版本控制工具Git,以及缓存在项目中的运用熟悉前端开发技术及常见的特效等。 通过课程可以了解项目开发流程及项目开发各阶段主要文档及产出物
领券