Ajax+JSON学习二

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 传递参数的方式,分两步:

  1. 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:由一对对 “名称=值” 组成(称为:名/值对),每一对之间用 “&” 拼接,如 “name=value&name=value&…&name=value”;
  2. 由于 名/值对 会附加在 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 请求使用 表单编码 的方式来发送数据的关键步骤:

  1. 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:像 GET 请求那样拼接为 名/值 对的形式;
  2. 将"Content-Type"请求头的值设置为"application/x-www-form-urlencoded"。

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

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

  1. “Content-Type"请求头的值需要为"application/json”;
  2. 对请求主体进行序列化,在 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 的语法可以表示以下三种类型的值:

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

注意:
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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/675483.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Golang】定时任务Cron指南-毫秒级任务支持

文章目录 CronCron快速使用时间表达式最小分钟级任务最小秒级任务预定义的时间表 时区Job选项Job 包装器WithLogger 支持毫秒级任务 Cron 版本&#xff1a;v3.0.0 仓库&#xff1a;https://github.com/robfig/cron cron是golang实现定时任务比较好的库, 这个库提供了一个简单而…

Tomcat 原理分析

1、Tomcat 的组成 如下图&#xff1a; Tomcat组成 Server&#xff1a; Tomcat 封装的、对外提供完整的、基于组件的 web 服务&#xff0c;包含 Connectors、Container 两个核心组件&#xff0c;以及多个功能组件&#xff0c;各个 Service 之间是独立的&#xff0c;但是共享 同…

MoE-LLaVA:具有高效缩放和多模态专业知识的大型视觉语言模型

视觉和语言模型的交叉导致了人工智能的变革性进步&#xff0c;使应用程序能够以类似于人类感知的方式理解和解释世界。大型视觉语言模型(LVLMs)在图像识别、视觉问题回答和多模态交互方面提供了无与伦比的能力。 MoE-LLaVA利用了“专家混合”策略融合视觉和语言数据&#xff0…

B2075 幂的末尾(洛谷)

复制Markdown 展开 题目描述 a的b次方的末 3 位数是多少&#xff1f; 输入格式 两个正整数 a&#xff0c;b。1≤a≤100&#xff0c;1≤b≤10000。 输出格式 从高位到低位输出幂的末三位数字&#xff0c;中间无分隔符。若幂本身不足三位&#xff0c;在前面补零。 输入输出…

【笔记】Helm-5 Chart模板指南-8 命名模板

命名模板 此时需要越过模板&#xff0c;开始创建其他内容了。该部分我们会看到如何在一个文件中定义 命名模板&#xff0c;并在其他地方使用。命名模板&#xff08;有时称作一个部分或一个子模板&#xff09;仅仅是在文件内部定义的模板&#xff0c;并使用了一个名字。有两种创…

打印斐波那契数列

定义&#xff1a; 斐波那契数列是指这样一个数列&#xff1a;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xff0c;13&#xff0c;21&#xff0c;34&#xff0c;55&#xff0c;89……这个数列从第3项开始 &#xff0c;每一项都等于前两项之和。 …

2402d,d引入新的勾挂降级

原文 我正在试为ArrayLiteralExps添加一个降级模板.它应该调用_d_arrayliteralTX1.我在expressionsem.d中引入了以前的所有降级,并打算通过在此处添加它来同样处理该降级. 但是,ArrayLiteralExps比其他式更挑剔,因为编译器干了许多优化,并最终创建了额外的ArrayLiteralExps或…

各种能源折标准煤参考系数

各种能源折标准煤参考系数Conversion Factors from Physical Units to Coal Equivalent能源名称平均低位发热量折标准煤系数EnergyAverage Low Calorific ValueConversion Factor原煤20 908千焦/(5 000千卡)/千克0.7143千克标准煤/千克Raw Coal20 908 kjoule/(5 000 kcal)/kg0.…

k8s-项目部署案例

一、容器交付流程 在k8s平台部署项目流程 在K8s部署Java网站项目 DockerFile 如果是http访问&#xff0c;需要在镜像仓库配置可信任IP 三、使用工作负载控制器部署镜像 建议至少配置两个标签 一个是声明项目类型的 一个是项目名称的 继续配置属性 资源配额 健康检查 五、使…

GraphicsMagick 的 OpenCL 开发记录(三十四)

文章目录 如何写ScaleImage()的硬件加速函数&#xff08;八&#xff09; <2022-05-05 周四> 如何写ScaleImage()的硬件加速函数&#xff08;八&#xff09; 我觉得Y方向的缩放以下面这种ScaleFilter()的方法是实现不了的&#xff0c;我只能添加进X方向的处理&#xff0…

【集合系列】HashMap 集合

HashMap 集合 1. 概述2. 方法3. 遍历方式4. 代码示例15. 代码示例26. 注意事项 其他集合类 父类 Map 实现类 LinkedHashMap 集合类的遍历方式 具体信息请查看 API 帮助文档 1. 概述 HashMap 是 Java 中的一种集合类&#xff0c;它实现了 Map 接口。HashMap 使用键值对存储数据…

手动汉化unity编辑器,解决下载中文语言报错问题

手动汉化unity编辑器&#xff0c;解决下载中文语言报错问题 START 最近在下载支持微信小程序版本的编辑器时&#xff0c;中文语言包&#xff0c;一直无法下载。记录一下 手动汉化unity编辑器的方法 &#xff0c;帮助和我遇到同样问题的人。 解决方案 1. 下载汉化包 https:…

ubuntu22.04@laptop OpenCV Get Started: 005_rotate_and_translate_image

ubuntu22.04laptop OpenCV Get Started: 005_rotate_and_translate_image 1. 源由2. translate/rotate应用Demo3 translate_image3.1 C应用Demo3.2 Python应用Demo3.3 平移图像过程 4. rotate_image4.1 C应用Demo4.2 Python应用Demo4.3 旋转图像过程 5. 总结6. 参考资料 1. 源由…

unity-ios-解决内购商品在Appstore上面已配置,但在手机测试时却无法显示的问题

自己这几天用 unity 2021 xcode 14.2 开发ios内购&#xff0c;appstore上面内购商品都已经配置好了&#xff0c;但是在手机里就是不显示&#xff0c;最后才发现必需得满足以下条件才行&#xff1a; 1. Appstore后台 -> 内购商品 -> 商品状态必需为『准备提交』以上状态…

springboot/ssm大学生就业服务平台就业招聘宣传管理系统Java系统

springboot(ssm大学生就业服务平台 就业招聘宣传管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql…

基于 Python 的漏洞扫描系统,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

Web 目录爆破神器:DirBuster 保姆级教程(附链接)

一、介绍 DirBuster 是一个用于强制目录浏览的渗透测试工具&#xff0c;它主要用于在Web应用程序中识别隐藏的目录和文件。这个工具被设计成非常灵活&#xff0c;可以根据用户的需求进行配置。以下是 DirBuster 的一些主要特点和用法&#xff1a; 主要特点&#xff1a; 字典爆…

k8s报错记录(持续更新中....)

k8s报错记录(持续更新中…) 1. 部署k8s遇到kube-flannel已经构建&#xff0c;但是coredns一直处于ContainerCreating和pending状态 解决问题&#xff1a; 通过 kubectl describe pod -n kube-system coredns-7ff77c879f-9ls2b 查看pod的详细信息&#xff0c;报错说是cni 配置没…

主动网络安全:成本效率和危机管理的战略方法

如何面对复杂网络攻击的进攻策略以及零信任模型的作用。攻击后反应性网络安全策略的基本步骤&#xff0c;透明度和准备工作。 讨论采用主动网络安全方法的好处&#xff0c;特别是在成本效率和危机管理方面&#xff0c;进攻性安全测试对合规性和零日响应的影响。 组织应该更多…

Python SimpleHTTPServer - Python HTTP 服务器

Python SimpleHTTPServer Python SimpleHTTPServer 模块是一个非常方便的工具。您可以使用 Python SimpleHTTPServer 将任何目录转换为简单的 HTTP web 服务器。 Python SimpleHTTPServer 仅支持两种 HTTP 方法 - GET 和 HEAD。因此&#xff0c;它是一个很好的工具&#xff0…