无需jQuery，如何用Ajax与PHP实现多值获取？技术求助

嘿，我太懂你的困扰了——刚接触Ajax的时候，满世界的jQuery示例确实会让人摸不清底层逻辑，而且JSON这东西乍一看也有点懵。咱们直接跳过jQuery，用原生JS来实现，核心就是用JSON来传递多值，这比用responseText解析纯文本靠谱多了。

为什么用JSON？ #

你之前看到的responseText是获取服务器返回的纯文本，如果要传多个值（比如用户的姓名、年龄、邮箱），你得用分隔符（比如逗号、竖线）把它们拼起来，然后前端再拆分，这很容易出问题（比如值里本身就有分隔符）。而JSON是结构化的数据格式，能完美传递键值对或者数组，前端解析起来也很方便。

完整实现步骤 #

1. 前端原生JS Ajax代码 #

这里我们用XMLHttpRequest（现代浏览器也可以用fetch，但先从基础的XHR开始，更容易理解）：

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();

// 配置请求：GET方法，后端PHP文件路径，异步请求
xhr.open('GET', 'your-backend.php', true);

// 设置响应类型为JSON（可选，但能让浏览器自动解析）
xhr.responseType = 'json';

// 请求成功后的处理函数
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 服务器返回的JSON数据已经被解析成JS对象了
    const responseData = xhr.response;
    console.log('姓名:', responseData.name);
    console.log('年龄:', responseData.age);
    console.log('邮箱:', responseData.email);
    
    // 这里就可以把数据渲染到页面上了，比如：
    // document.getElementById('name').textContent = responseData.name;
  } else {
    console.error('请求出错，状态码:', xhr.status);
  }
};

// 网络错误处理
xhr.onerror = function() {
  console.error('网络请求失败');
};

// 发送请求
xhr.send();

2. 后端PHP代码 #

PHP这边要做的就是准备好要返回的多值数据，转成JSON格式，然后设置正确的响应头：

<?php
// 模拟从数据库或者其他地方获取的多值数据
$userData = [
  'name' => 'Jelle',
  'age' => 28,
  'email' => 'jelle@example.com',
  'hobbies' => ['coding', 'hiking', 'reading'] // 还可以传数组
];

// 设置响应头，告诉浏览器返回的是JSON数据
header('Content-Type: application/json');

// 将PHP数组转成JSON字符串并输出
echo json_encode($userData);
?>

关键细节解释 #

• 前端responseType = 'json'：这个设置能让浏览器自动把服务器返回的JSON字符串解析成JS对象，不用你手动写JSON.parse(xhr.responseText)（当然如果不设置的话，你也可以手动解析）。
• PHP的header('Content-Type: application/json')：这个很重要，它告诉前端服务器返回的是JSON格式的数据，避免浏览器把它当成纯文本处理。
• JSON的结构：JSON本质就是键值对的集合，和JS对象很像，但注意JSON的键必须用双引号，字符串也必须用双引号，这是语法要求。

如果用POST方法怎么办？ #

如果需要给PHP传参数（比如表单数据），用POST方法也很简单，前端代码稍微改一下：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'your-backend.php', true);
// 设置POST请求的内容类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.responseType = 'json';

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const responseData = xhr.response;
    // 处理返回的数据
  }
};

// 构造要发送的表单数据（注意用encodeURIComponent转义特殊字符）
const formData = 'username=' + encodeURIComponent('Jelle') + '&password=' + encodeURIComponent('123456');
xhr.send(formData);

PHP那边可以用$_POST['username']和$_POST['password']获取参数，然后再返回JSON数据。

这样你就能不用jQuery，纯原生JS和PHP实现多值的传递和获取啦，比解析responseText靠谱多了！

内容的提问来源于stack exchange，提问作者Jelle 3.0