jquery ajax请求PHP后端数据

最新推荐文章于 2025-04-01 09:16:07 发布

soosgo

最新推荐文章于 2025-04-01 09:16:07 发布

阅读量442

点赞数 1

分类专栏： ES6 jQuery PHP

本文链接：https://blog.youkuaiyun.com/Doulvme/article/details/114303140

版权

jQuery 同时被 3 个专栏收录

21 篇文章

订阅专栏

PHP

18 篇文章

订阅专栏

ES6

15 篇文章

订阅专栏

这篇博客介绍了如何使用jQuery的AJAX方法从PHP后端获取JSON数据，并在前端界面展示。首先展示了PHP代码如何生成JSON响应，接着详细说明了前端如何解析并显示这些数据。最后，提到了对PHP后端代码的修改，包括删除部分代码的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PHP代码返回json数据：

<?php
//链接数据库   查询相关内容
$con=mysqli_connect("localhost", "root", "123456", "school");
if(!$con){
	die("can not connect");
}
//编写查询语句
$sql="SELECT * FROM `websites`";
$result=mysqli_query($con, $sql);
while ($row=mysqli_fetch_assoc($result)) {
	$rows[]=$row;
}
echo json_encode($rows);//封装成json数据

?>

前端界面接收json数据并显示：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<!--<script type="text/javascript">
		//原生ajax
		if(new XMLHttpRequest()){
			var xmlhttp=new XMLHttpRequest();
		}else{
			var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
		}
		xmlhttp.onreadystatechange=function(){
			if(xmlhttp.readyState==4&&xmlhttp.status==200){
				console.log(xmlhttp.responseText);
			}
		}
		xmlhttp.open("get","./Test2.php");
		xmlhttp.send();
	</script>-->
	<!--jquery  ajax-->
	<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$.ajax({
				type:"get",
				url:"Test2.php",
				async:true,
				dataType:"json",//设置返回数据格式为json格式
				success:function(data){
					console.log(data);
					console.log(data.length);//4
					var str="";
					for(var i=0;i<data.length;i++){
						str+=`
						<tr>
						<td>${data[i].id}</td>
						<td>${data[i].name}</td>
						<td>${data[i].url}</td>
						<td>${data[i].aleax}</td>
						<td>${data[i].country}</td>
						<td>
							<a href="javascript:add(${data[i].id})">修改</a>
							<a href="javascript:;" onclick="del(${data[i].id})">删除</a>
						</td>
						</tr>
						`;
					}
					$('tbody').html(str);
				},
				error:function(error){
					console.log(error);
				}
			});
		});
		//修改
		function add(id){
			//使用jquery  发送ajax请求
			$.ajax({
				type:"post",//post方式
				url:"TestAdd.php",
				async:true,
				data:{
					"id":id
				},
				dataType:"json",//返回的数据格式一定要带
				success:function(data){
					console.log(data);
					console.log(data.errno);
					if(data.errno==0){
						alert("ok");
                        window.location.reload();//刷新当前页面
					}else{
						alert("error");
					}	
				}
			});
		}
		//删除
		function del(id){
			$.ajax({
				type:"get",//get方式
				url:"TestDel.php?id="+id,
				async:true,
				dataType:"json",
				success:function(data){
					console.log(data);
					if(data.data){
						alert("ok");
                        window.location.reload();//刷新当前页面    
					}else{
						alert("error");
					}
				}
			});
		}
	</script>
</head>
<body>
	<table border="" cellspacing="" cellpadding="">
		<thead>
			<tr>
				<th>网站名</th>
				<th>网站URL</th>
				<th>网站排名</th>
				<th>alex值</th>
				<th>国家</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr><td>Data</td></tr>
		</tbody>
		
	</table>
</body>
</html>

运行效果：

关于PHP后端修改代码：

<?php
//请求的参数
$id=intval($_POST['id']);
$con=mysqli_connect("localhost", "root", "123456", "school");
if(!$con){
	die("can not connect");
}
$sql="update `websites` set name='111' where id=$id";
$result=mysqli_query($con, $sql);
$n=mysqli_affected_rows($con);
//组织一下返回的json文件
$response=[];
if($n>0){
	$response=array(
	'errno'=>0,
	'errmsg'=>'success',
	'data'=>true,
	);
}else{
	$response=array(
	'errno'=>-1,
	'errmsg'=>'fail',
	'data'=>FALSE,
	);
}
//将数组变成json文件进行回复
echo json_encode($response);

?>

删除后端代码：

<?php
//请求的参数
$id=intval($_GET['id']);
$con=mysqli_connect("localhost", "root", "123456", "school");
if(!$con){
	die("can not connect");
}
//编写查询语句
//$sql="update `websites` set name='111' where id=$id";
$sql="delete from `websites` where id=$id";
$result=mysqli_query($con, $sql);
$n=mysqli_affected_rows($con);
$response=[];
if($n>0){
	$response=array(
	"error"=>0,
	"errmsg"=>"success",
	"data"=>TRUE,
	);
}else{
	$response=array(
	"error"=>-1,
	"errmsg"=>"fail",
	"data"=>FALSE,
	);
}
echo json_encode($response);
?>