前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(一)

简介: 前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容

I. 引言

介绍在前端开发中需要向后端传递参数的现实问题

在前端开发中,需要向后端传递参数以获取数据或完成操作是非常普遍的现实问题。

常见的场景包括用户表单提交、查询数据、修改数据、添加数据、删除数据等等。

为了保证数据的正确性和安全性,前端应遵循安全规范,并在数据传输中选择最佳的入参方式。

同时,正确的参数传递方式也会有助于提高网页速度和响应效率,提升用户体验

因此,前端开发适当的了解常见的参数传递方式,进行正确的参数传递也是非常重要的。

引出本文要介绍的前端常见入参方式

在前端开发中,我们通常会使用多种方式向后端传递参数以获取数据或完成操作。

每种方式都有其优缺点和适用场景。

本文将介绍前端常见的入参方式,包括

  • URL查询参数
  • 表单数据提交
  • FormData对象提交
  • HTTP Headers
  • JSON数据提交
  • XML数据提交
  • Hash参数

接下来介绍并分析每种方式的情况,希望能够对前端开发者提供实用、高效、安全的参数传递解决方案。

II. URL查询参数

什么是URL查询参数

网络编程中,URL(Uniform Resource Locator,统一资源定位器)是用于指定互联网上资源位置的一种标识符。

URL查询参数是指在URL中使用?和&符号对参数进行传递的一种方式。

例如:https://www.example.com/search/?q=front-end+development&oq=front-end+development&aqs=chrome.0.0i131i355i433i512j0i131i433j0i433j0i131i355i433i512l2j0i131i433i512j69i60.6558j1j7&sourceid=chrome&ie=UTF-8

在这个例子中,“?”之后的字符串就是URL查询参数,其中每段参数都以“&”符号分隔。参数q表示关键词,“oq”、“aqs”、“sourceid”、“ie”等参数表示其他操作行为。

前端开发者通常可以通过URL查询参数的方式将一些数据传递到后端。常见的应用场景包括搜索功能和分页功能。需要注意的是,由于URL具有敏感性,敏感信息不宜放在URL中传递。

如何在URL中添加参数

要在URL中添加参数,可以在URL的末尾添加“?”符号和参数列表,每个参数使用“&”符号分隔,格式如下:

http://www.example.com/search?name=value&age=18&sex=male

其中“name=value”表示一个参数及其取值,多个参数之间使用“&”符号分隔。参数名和参数值均需要进行url编码,特殊字符需要进行转义。例如:

http://www.example.com/search?name=John%20Doe&age=18&sex=male

注意:参数顺序不影响页面效果,但参数顺序不同可能会被搜索引擎误认为是不同的页面。

在前端开发中,我们可以通过JavaScript中的window.location.search属性来获取当前URL中的查询参数。

const searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('name')); // 输出 'John Doe'
console.log(searchParams.get('age')); // 输出 '18'
console.log(searchParams.get('sex')); // 输出 'male'

以上代码使用ES6语法创建URLSearchParams对象,可以轻松获取URL中的查询参数。get()方法用于获取指定参数名的参数值,如果参数不存在,则返回null。

获取URL查询参数的方法

获取URL查询参数的方法有以下几种:

1. 使用原生JavaScript获取:

可以使用window.location.search属性来获取当前URL中的查询参数,返回的是一个字符串,包括问号后面的所有参数。接着可以使用String.slice()方法去掉问号,再用String.split()方法按照"&"分割成数组,最后再遍历数组获取参数。

// 获取URL所有查询参数
const params = window.location.search.slice(1).split('&');
// 遍历数组获取每个参数名和值
const obj = {};
params.forEach(param => {
  const [key, value] = param.split('=');
  obj[key] = decodeURIComponent(value);
});
console.log(obj);  // 输出对象 { name: "John Doe", age: "18", sex: "male" }

2. 使用URLSearchParams:

URLSearchParams是ES6中的一个新特性,可以方便地解析查询参数。它提供了一些有用的方法,如get()获取指定参数名的参数值,keys()获取所有参数名,values()获取所有参数值,entries()获取所有参数名和参数值组成的数组。需要先创建一个URLSearchParams对象,将URL的查询参数传入进去。

// 获取URL所有查询参数
const searchParams = new URLSearchParams(window.location.search);
// 遍历获取每个参数名和值
const obj = {};
for (const [key, value] of searchParams.entries()) {
  obj[key] = value;
}
console.log(obj);  // 输出对象 { name: "John Doe", age: "18", sex: "male" }

3. 使用第三方库:

如果项目中使用了第三方库,如jQuery、Lodash、Underscore.js等,这些库都提供了方便的解析参数的方法。例如,使用jQuery:

// 获取URL所有查询参数
const params = $.deparam(window.location.search.slice(1));
console.log(params);  // 输出对象 { name: "John Doe", age: "18", sex: "male" }

URL查询参数的使用场景

URL查询参数的使用场景比较广泛,包括但不限于以下几种:

1. 搜索结果页:

搜索引擎一般会在URL的查询参数中带有搜索关键词,方便用户分享搜索结果以及在浏览器中回退到上一次搜索结果页面。

2. 分页:

分页功能需要在URL的查询参数中带有页码,这样可以保证每个页面的地址是唯一的,并且可以方便地通过地址栏切换不同的页码。

3. 筛选条件:

在电商网站等场景中,页面上有多个筛选条件,如商品分类、价格区间、品牌等等。用户在选择完筛选条件后,点击“筛选”按钮或者“搜索”按钮时,需要将这些条件以参数的形式传递给后端,以便后端进行筛选操作。

4. 跳转页面时传递参数:

在页面跳转时,有时候需要将参数传递给新页面,以便新页面进行操作。可以将参数放在URL的查询参数中,然后在新页面中进行解析和操作。

总之,URL查询参数非常适合在前端和后端之间传递简单的数据,例如一个或多个数值、逻辑状态等等,方便实现GET请求。但对于更复杂的数据类型,如JSON或XML,最好使用其他的传参方式,如POST请求

III. 表单数据提交

前端表单的基础结构

一个简单的表单由以下几个主要组成部分:

  1. 标签:定义了一个表单,并且将表单内的控件组合在一起。
  2. 表单控件:、、等标签表示不同类型的表单控件,每个控件都有自己的属性和特性,可以对表单输入内容进行校验或处理。
  3. 提交按钮:按钮定义在表单内,用于提交表单数据到服务器端。
  4. 取消/重置按钮:按钮用于清空表单所有的控件内容(或将其还原为原始值)。

一个简单的表单结构示例如下:

<form action="#" method="post">
  <label for="name">姓名:</label>
  <input id="name" type="text" name="username" required>
  <label for="email">邮箱:</label>
  <input id="email" type="email" name="email" required>
  <label for="sex">性别:</label>
  <select id="sex" name="sex">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
  <label for="message">留言:</label>
  <textarea id="message" name="message"></textarea>
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

需要注意的是,标签中的action属性可以指定数据提交至服务器端的处理脚本或API,并且method属性可以指定数据提交方式(GET或POST)。同时每个表单控件都需要定义一个name属性,以便服务器端正确解析数据。

在以上示例中,标签的type属性设置为text和email,用于限制输入格式;标签定义了选项和默认选中项;标签用于输入多行文本内容,没有type属性;标签用于定义按钮类型,type属性可以设置为submit、reset、button等。

表单提交的3中方式:GET、POST和PUT

表单提交有三种方式:GET、POST和PUT。

  1. GET:将表单数据附加在URL后提交给服务器。这种方式比较适合提交一些简单查询条件等数据,但不适合提交大量数据或敏感数据,因为表单数据会出现在URL中,容易被第三方获取和窃取
<form action="http://example.com/search" method="GET">
  <input type="text" name="query" />
  <button type="submit">搜索</button>
</form>
  1. 例如,上述示例中,当用户点击搜索按钮时,表单数据将通过GET方式提交到http://example.com/search?q=query,q参数就是表单中输入的搜索关键词。
  2. POST:将表单数据作为消息体提交给服务器。用户输入的数据不会出现在URL中,因此比GET方式更安全,可以提交大量数据或敏感数据
<form action="http://example.com/submit" method="POST">
  <label for="name">姓名:</label>
  <input type="text" name="name" />
  <label for="email">邮箱:</label>
  <input type="email" name="email" />
  <button type="submit">提交</button>
</form>
  1. 例如,上述示例中,当用户点击提交按钮时,表单数据将通过POST方式提交到http://example.com/submit,数据不会出现在URL中,而是封装在HTTP请求的消息体中
  2. PUT:将表单数据作为消息体提交给服务器,并用来更新服务器上存在的文档或资源。PUT请求类似于POST请求,不同之处在于PUT请求用于更新已有的资源,而不是在服务器上创建新的资源。
<form action="http://example.com/update" method="PUT">
  <input type="hidden" name="id" value="123" />
  <label for="name">姓名:</label>
  <input type="text" name="name" />
  <label for="email">邮箱:</label>
  <input type="email" name="email" />
  <button type="submit">提交</button>
</form>
  1. 例如,上述示例中,当用户点击提交按钮时,表单数据将通过PUT方式提交到http://example.com/update/123,其中123是要更新的资源的ID。

需要注意的是,在使用PUT方式提交时,通常需要使用隐藏来传递资源ID等必要的信息,这样服务器在接收到PUT请求时才能正确更新相应的资源。

使用各种HTTP方法提交表单数据之间的差异

HTTP方法 说明
GET 表单数据作为查询字符串附加在URL上发送。适用于数据量小、安全性要求不高的情况,如搜索、查看等。
POST 表单数据作为请求体内容发送。适用于数据量大、安全性要求高的情况,如登录、注册等。
PUT 表单数据作为请求体内容发送,并更新指定资源。适用于更新整个资源。
PATCH 表单数据作为请求体内容发送,并对指定资源进行部分更新。适用于只更新部分资源。
DELETE 删除指定资源。适用于需要删除指定资源的情况。

总结:

  • GET:数据在URL中传输,适用于数据量小、安全性不高的情况。
  • POST:数据在请求体中传输,适用于数据量大、安全性高的情况。
  • PUT:用于更新整个资源。
  • PATCH:用于更新部分资源。
  • DELETE:用于删除指定资源。

如何获取表单数据以及其它输入控件的值

获取表单数据以及其它输入控件的值可以通过JavaScript来实现。以下是常见的获取表单数据或其它输入控件值的方法:

1. 通过id获取元素,并使用value属性获取控件的值,例如:

<input type="text" id="username">
<button onclick="getValue()">获取值</button>
<script>
function getValue() {
  var username = document.getElementById("username").value;
  console.log(username);
}
</script>

2. 通过name属性获取元素,并使用querySelector()或querySelectorAll()方法获取表单元素的值,例如:

<form>
  <label>
    用户名:
    <input type="text" name="username">
  </label>
  <label>
    密码:
    <input type="password" name="password">
  </label>
  <button type="button" onclick="getFormValues()">获取表单值</button>
</form>
<script>
function getFormValues() {
  var formData = new FormData(document.querySelector('form'));
  console.log(formData.get('username'));
  console.log(formData.get('password'));
}
</script>

3. 使用jQuery库来简化获取元素和值的操作,例如:

<form>
  <label>
    用户名:
    <input type="text" name="username">
  </label>
  <label>
    密码:
    <input type="password" name="password">
  </label>
  <button type="button" onclick="getFormValues()">获取表单值</button>
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getFormValues() {
  var username = $('input[name="username"]').val();
  var password = $('input[name="password"]').val();
  console.log(username);
  console.log(password);
}
</script>

以上是常用的获取表单数据或其它输入控件值的方法,需要根据实际情况选择适合自己的方法。

IV. FormData对象提交

什么是FormData

FormData 是一种对象,可以将一个表单中的数据以 key-value 的形式构建出来,以便用于 AJAX 请求中提交数据。

FormData 的数据类型用于 HTML 表单数据、文件以及 Blob 对象等二进制数据。

使用 FormData 的好处是,可以自动识别表单中的控件类型,并将数据以正确的方式编码和添加到请求中。不必对每个表单字段手动进行编码,也不必为上传文件和二进制数据检查每个字节或者实例化许多 XmlHttpRequest 对象。

使用 FormData 构建表单数据并提交到服务器端的示例代码如下:

function sendData() {
  var inputs = document.querySelectorAll('input[type="text"], input[type="email"]');
  var formData = new FormData();
  for (var i = 0; i < inputs.length; i++) {
    formData.append(inputs[i].name, inputs[i].value);
  }
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/api/submitform', true);
  xhr.onload = function(e) {
    if (this.status === 200) {
      console.log(this.response);
    }
  };
  xhr.send(formData);
}

以上代码使用 FormData 将表单数据编码并提交到 /api/submitform 服务器端的地址,其中将表单中的所有 type="text"type="email" 的控件的 namevalue 填充到 FormData 对象中。最后使用 XmlHttpRequest 对象发送请求,并在响应成功后输出响应结果。


前端网络请求真的搞懂了吗?解密前端参数传递方式,让开发更从容(二)

https://developer.aliyun.com/article/1426379

相关文章
|
2月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
471 0
|
9天前
|
人工智能 前端开发 JavaScript
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
前端工程化演进之路:从手工作坊到AI驱动的智能化开发
|
18天前
Vite使用svg-企业级开发(支持本地svg和网络svg渲染)
本教程介绍如何在Vite项目中集成SVG图标插件。首先安装`vite-plugin-svg-icons`,配置插件指向SVG图标目录,并注册全局组件。接着创建SVG图标组件,支持内部图标与外部图片展示。通过简单配置,即可在页面中灵活使用各类SVG图标,提升开发效率。
73 0
|
4月前
|
JSON 中间件 Go
Go 网络编程:HTTP服务与客户端开发
Go 语言的 `net/http` 包功能强大,可快速构建高并发 HTTP 服务。本文从创建简单 HTTP 服务入手,逐步讲解请求与响应对象、URL 参数处理、自定义路由、JSON 接口、静态文件服务、中间件编写及 HTTPS 配置等内容。通过示例代码展示如何使用 `http.HandleFunc`、`http.ServeMux`、`http.Client` 等工具实现常见功能,帮助开发者掌握构建高效 Web 应用的核心技能。
248 61
|
4月前
|
开发者
鸿蒙仓颉语言开发教程:网络请求和数据解析
本文介绍了在仓颉开发语言中实现网络请求的方法,以购物应用的分类列表为例,详细讲解了从权限配置、发起请求到数据解析的全过程。通过示例代码,帮助开发者快速掌握如何在网络请求中处理数据并展示到页面上,减少开发中的摸索成本。
鸿蒙仓颉语言开发教程:网络请求和数据解析
|
5月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
300 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
7月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
310 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
4月前
|
监控 安全 网络协议
恶意软件无处逃!国内版“Manus”AiPy开发Windows沙箱工具,进程行为+网络传输层级监控! 头像 豪气的
NImplant.exe 是一款后渗透测试工具,可实现远程管理与持久化控制。其优点包括无文件技术、加密通信和插件扩展,但也存在被检测风险及配置复杂等问题。为深入分析其行为,我们基于 aipy 开发了 Windows 沙箱工具,针对桌面上的 NImplant.exe 进行多维度分析,涵盖进程行为、网络连接(如 TCP 请求、目标 IP/域名)、文件控制等,并生成传输层监控报告与沙箱截图。结果显示,aipy 工具响应迅速,报告清晰易读,满足分析需求。
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
499 12
|
7月前
|
网络协议 物联网
VB6网络通信软件上位机开发,TCP网络通信,读写数据并处理,完整源码下载
本文介绍使用VB6开发网络通信上位机客户端程序,涵盖Winsock控件的引入与使用,包括连接服务端、发送数据(如通过`Winsock1.SendData`方法)及接收数据(利用`Winsock1_DataArrival`事件)。代码实现TCP网络通信,可读写并处理16进制数据,适用于自动化和工业控制领域。提供完整源码下载,适合学习VB6网络程序开发。 下载链接:[完整源码](http://xzios.cn:86/WJGL/DownLoadDetial?Id=20)
243 12