Ajax学习笔记

这篇博客介绍了如何使用Ajax进行异步数据请求,通过点击事件触发XMLHttpRequest对象,设置请求方法和URL,处理响应状态。示例中展示了从PHP后端获取JSON数据,解析并遍历JSON数组,打印出成员的name属性。PHP部分则通过file_get_contents读取JSON文件并返回数据。

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

Ajax学习笔记

初识PHP

<?php
header('Content-type:text/html; charset=utf-8');

echo 'Hello World!';
$name = 'Pianpianluoye';
echo $name;
?>

php中拼接字符串用点’.’

Ajax

document.querySelector('input').onclick = function () {
	// 1. 创建异步对象
	var xhr = new XMLHttpRequest();
	// 2. 设置请求行
	xhr.open('post', 'backJSON.php');
	// 3. 设置请求头(get方法时可以省略,post方法如果不发送数据也可以省略)
	
	// 4. 注册状态改变事件(回调函数)
	xhr.onreadystatechange = function () {
		// 4.1 判断状态&请求是否成功并使用函数
		if (xhr.readyState == 4 && xhr.status == 200) {
			// JSON的载体是字符串,用即responseText可获取
			console.log(xhr.responseText);
			var arrObj = JSON.parse(xhr.responseText);
			for (var i =0; i<arr.length;i++) {
				var currentObj = arr[i];
				console.log(currentObj.name);
			}
		}
	}
	// 5. 发送请求
	xhr.send(null);
}

PHP代码

<?php

$jsonString = file_get_contents('data/stars.json');

echo $jsonString;

?>

JSON 文件

[
	{
	"name":"Pianpianluoye",
	"age":25
	},
	{
	"name":"Kevin",
	"age":24
	},
	{
	"name":"Ajax",
	"age":29
	}
]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值