JS—我的第六个AJAX程序(前端从数据库中获取数据库中数据，JSON传输)

关注

原创最新推荐文章于 2026-10-12 23:37:09 发布 2.8k 阅读 AI 写同款· GEO 优化 ›

SSM框架下使用JSON和AJAX进行前后端数据传输 SSM框架下使用JSON和AJAX进行前后端数据传输随着前后端分离开发，前端使用ajax发送请求，后台提供相应的服务，之间的数据传递用JSON来完成！（本节内容需要你有javascript基础）接下来用登陆功能来演示前后端通过JSON交互 1. 前端页面 <%-- Created by IntelliJ IDEA. User: Administrat 阅读详情

前端：

common.js

function $(id) {
	return document.getElementById(id);
}

function createXhr(){
	var xhr;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft XMLHttp");
	}
	return xhr;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="common.js"></script>
</head>
<body>
	<button onclick="getMsg()">显示数据</button>
	<script>
		function getMsg(){
			var xhr = createXhr();
			xhr.open("get","users.php",true);
			xhr.onreadystatechange = function() {
				if(xhr.readyState == 4 && xhr.status == 200){
					var resText = xhr.responseText;
					var arr = JSON.parse(resText);
					for(var i in arr){
						console.log("编号:"+arr[i].uid);
						console.log("用户姓名:"+arr[i].uname);
						console.log("电子邮件:"+arr[i].email);
						console.log("联系方式:"+arr[i].phone);
					}
				}
			}
			xhr.send(null);
		}
	</script>
</body>
</html>

后台：

init.php

<?php 

	$conn = mysqli_connect("127.0.0.1","root","","xz",3306);
	$initsql = "SET NAMES UTF8";
	mysqli_query($conn,$initsql);
?>

users.php

<?php 
	
	header("Content-Type:application/json");

	require("init.php");

	$sql = "SELECT * FROM xz_user";

	$result = mysqli_query($conn,$sql);

	if($result === false){
		echo null;
	}else{
		$count = mysqli_affected_rows($conn);
		if($count == 0){
			echo 0;
		}else{
			$arr = mysqli_fetch_all($result,1);
			$arr = json_encode($arr);
			echo $arr;
		}
	}
?>

收录于