当前位置：首页 > news >正文

Ajax+JSON学习二

news 2025/9/9 16:44:03

Ajax+JSON学习二

文章目录

前言
三、前后端数据交互
- 3.1. GET请求
- 3.2. POST请求
- 3.3. jQuery 中的 Ajax
- 3.4. Ajax 的替代品：fetch
- 3.5. 小结
四、JSON
- 4.1. JSON简介
- 4.2. JSON 语法规则
- 4.3. JSON的解析和序列化
总结

前言

三、前后端数据交互

3.1. GET请求

GET 请求一般用于信息获取，它没有请求主体，而是使用 URL 传递参数（即：传递数据给后台）。

GET 传递参数的方式，分两步：

对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：由一对对 “名称=值” 组成（称为：名/值对），每一对之间用 “&” 拼接，如 “name=value&name=value&…&name=value”；
由于名/值对会附加在 URL 地址后面，因此在这串字符参数的最前面需要添加个 “?”，表示 URL 的查询参数开始。

// GET请求的后端接口
var url = "/statics/demosource/demo_get_json.php";// 获取用户输入的表单数据
var country = document.getElementById("country").value,city = document.getElementById("city").value;// 将需要传递的参数拼接为 "名称=值" 对的形式
var query = "country=" + country + "&city=" + city;// 在 query 前面添加个 "?"，再拼接后端接口
var queryURL = url + "?" + query;// 发起GET请求：使用拼接好的 queryURL
ajaxGet(queryURL);

扩展：因 JavaScript 对象数据是键值对的形式，它与上述的名值对具有类似的性质，因此在 Ajax 的应用中，传递的数据通常直接来自一个 JavaScript 对象，这时只需遍历这个 JavaScript 对象，将每一个键值对按 “名称=值” 的形式进行拼接即可。

function urlencodeData (data) {if (!data) return "";var pairs = [];    // 存储名/值对for (var name in data) {if (!data.hasOwnProperty(name)) continue;        // 如果是继承属性则跳过if (typeof data[name] === "function") continue;  // 如果是方法则跳过// 将 null 与 undefined 改为空字符串var value = (data[name] === null || data[name] === undefined) ? "" : data[name].toString();// encodeURIComponent 用于对空格、中文等特殊字符进行 URI 编码pairs.push(encodeURIComponent(name) + "=" + encodeURIComponent(value));}return pairs.join("&");
}

3.2. POST请求

POST 请求一般用于修改服务器上的资源，它需要发送一个请求主体，客户端传递给服务器的数据就包含在这个请求主体中。

前置知识："Content-Type"请求头用于设置请求主体的编码格式。

POST 请求使用表单编码的方式来发送数据的关键步骤：

对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：像 GET 请求那样拼接为名/值对的形式；
将"Content-Type"请求头的值设置为"application/x-www-form-urlencoded"。

JSON 是一种轻量级的前后端数据交换格式，直接使用JSON.stringify原生 API 即可实现 JSON 编码，比表单编码的方式更加快捷。

POST 请求使用 JSON编码的方式来发送数据的关键步骤：

“Content-Type"请求头的值需要为"application/json”；
对请求主体进行序列化，在 JavaScript 中可使用JSON.stringify完成这步操作。

// 获取用户输入的表单数据
var country = document.getElementById("country").value,city = document.getElementById("city").value;// 将数据转换为 JavaScript 对象
var data = {country : country,city : city
}var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {// ... ... 省略事件处理程序
}// 指定 POST 请求
xhr.open("POST", "/statics/demosource/demo_json_data.php");// 设置请求主体的编码方法
xhr.setRequestHeader("Content-Type", "application/json");// 编码请求主体并发送
xhr.send(JSON.stringify(data));

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Tryrun 11</title>
</head>
<body><div id="form"><label for="country">国家：<input type="text" name="country" id="country"></label><label for="city">城市：<input type="text" name="city" id="city"></label></div><hr><div>你查询的国家是：<span id="ipt_country"></span></div><div>你查询的城市是：<span id="ipt_city"></span></div><br><button type="button" id="search">查询</button>（查询成功后会把你输入的值显示在上方）<script>var oSearch = document.getElementById("search"),oIpt_country = document.getElementById("ipt_country"),oIpt_city = document.getElementById("ipt_city");oSearch.onclick = function () {var country = document.getElementById("country").value,city = document.getElementById("city").value;var query = "country=" + country + "&city=" + city;var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {var res = JSON.parse(xhr.responseText);oIpt_country.innerText = res.params.country;oIpt_city.innerText = res.params.city;}}}xhr.open("POST", "/statics/demosource/demo_post_json.php");xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");xhr.send(query);}</script>
</body>

3.3. jQuery 中的 Ajax

jQuery 是一个 JavaScript 工具库，它封装了 JavaScript 常用的功能代码，包括我们刚刚学完的 Ajax。

jQuery 中，Ajax 常见的请求方式有以下几种：

$.ajax(url, options)
$.get(url, data, callback, dataType)
$.post(url, data, callback, dataType)
$.getJSON(url, data, callback)
$.getScript(url, callback)
jQuery元素.load(url, data, callback)

// 使用jQuery发起ajax请求
$.ajax("/statics/demosource/demo_get_json.php", {//请求类型type: "GET",//要发送的数据data: {country: country,city: city},//数据格式dataType: "json",//请求成功后执行success: function (res) {    // res为响应成功返回的数据oIpt_country.innerText = res.params.country;oIpt_city.innerText = res.params.city;},//请求失败后执行error: function (res) {    // 这里的res为响应失败返回的数据alert("请求失败：" + res.status);}
});

3.4. Ajax 的替代品：fetch

Fetch API 是随 ES6 发展而出现的一个 JavaScript 原生接口，与 Ajax 一样允许开发者异步发起 HTTP 请求，但却以更加简单明了的调用方式、基于 Promise 的数据处理方式被称作是 Ajax 的替代品。

fetch("/statics/demosource/demo_json_data.php", {method: "POST",header: new Headers({"Content-Type" : "application/json"}),body: JSON.stringify(data)
})
.then(function (res) {return res.ok ? res.json() : Promise.reject(res);
})
.then(function (data) {oIpt_country.innerText = data.country;oIpt_city.innerText = data.city;
})
.catch(function (res) {alert("请求失败：" + res.status);
})

3.5. 小结

通过学习 Ajax，明白了：XMLHttpRequest对象其实就是 HTTP 规范在客户端 JavaScript 中的实现，一次 HTTP 请求，就对应着一个XMLHttpRequest实例，在这个实例上，可以取到 HTTP 协议中规定的各种协议属性。

四、JSON

4.1. JSON简介

JSON = JavaScript Object Notation，意思是：JavaScript 对象表示法，是一种轻量级的数据交换格式。

JSON 是 JavaScript 的子集，它利用了 JavaScript 中的一些模式来表示结构化数据，是在 JavaScript 中读写结构化数据的更好方式。

关于 JSON，要明白它只是一种数据格式，独立于编程语言，虽然与 JavaScript 具有相同的语法形式，但并不是只有 JavaScript 才能使用 JSON，很多编程语言都有针对 JSON 的解析器和序列化器。

4.2. JSON 语法规则

JSON 的语法可以表示以下三种类型的值：

简单值：使用与 JavaScript 相同的语法，可以在 JSON 中表示number、string、boolean 与 null，但 JSON 不支持 JavaScript 中的特殊值undefined；
对象：对象作为一种复杂数据类型，表示的是一组无序的键值对，而每个键值对中的值可以是简单值，也可以是复杂数据类型的值；
数组：数组也是一种复杂数据类型，表示一组有序的值的列表，数组的值也可以是任意类型 —— 简单值、对象或数组。

注意：
JSON字符串与 JavaScript字符串的最大区别在于，JSON 字符串必须使用双引号，单引号会导致语法错误。

与 JavaScript 的字面量相比，JSON 对象的键（属性名）必须加双引号。

JSON 数组采用的就是 JavaScript 中的数组字面量形式

4.3. JSON的解析和序列化

JSON 对象的方法：

JSON.stringify()：用于序列化 JavaScript 对象，将其转换为 JSON 字符串；
JSON.parse()：用于解析 JSON 字符串，将其转换为 JavaScript 值。

知识点补充：解析 JSON 字符串的其它方法

方法一：使用 JavaScript 的eval()函数

var obj = eval("(" + json + ")");

因为eval()函数会将传入的字符串当作 JavaScript 代码执行，为了防止 JavaScript 对象的花括号{}被误解析为 JavaScript 函数的花括号，需要对 JSON 字符串加上圆括号。

方法二：巧妙使用 Function 构造函数

var obj = new Function("return (" + json + ")")();

总结

2023–12-17