前端和后端 数据交互的基本知识

article/2025/8/27 0:22:55

一、首先了解前端、后端、数据三者的关系

1) 前端通常是html,css,js三者构成的页面的总称。运行在客户端。以浏览器为例。

2) 后端是指后端程序。比如java,php等编写的一些服务。用来操作服务器。

3) 数据,数据都存放在服务器上。

4) 服务器上的数据大多会放在数据库中,比如mysql数据库;部分数据会缓存在文件或redis中,比如一些配置文件,以加快响应速度。

5) 有两个比较有趣的缓存数据,cookie和session,它们通常用来记录请求者的身份。cookie常常加密储存在客户端里。session常常储存在服务器上。

6) 前端不能直接操作数据库,必须通过后端来进行操作。因此,就产生了前后端数据交互(通过接口)的问题。

二、前后端数据交互的原理

基于BS模式下的前后端交互方式,遵循 请求&响应 原理。

1) 输入网址,打开网页,这本身就是一次基本的数据交互模式。

  • 前端发送请求,后端返回数据

2) 我们讨论前后端的交互方式时,一般是讨论前后端都参与时的情况。 常见的前后端交互的基本模式如下:

i)url地址(没有url就无法发起一次请求)

ii)请求参数(请求一个url,然后发送请求参数,达到更精细化的请求)

iii)前端的触发方式

  • 用 a标签 可以发 get 请求,但是也会刷新页面或新开页面;
  • 用 img 可以发 get 请求,但是只能以图片的形式展示;
  • 用 link 可以发 get 请求,但是只能以 css、favicon 的形式展示;
  • 用 script 可以发 get 请求,但是只能以脚本的形式运行;
  • 用 form表单 可以发请求,但是会刷新页面或新开页面;
  • 用 jsonp 实现请求,支持跨域请求;
  • 用 ajax 实现页面无刷新的请求。

iv)前端触发以后,前端请求的方式

 v)前端请求的数据格式

  • 对于请求参数和返回的数据,前后端会统一起来,使用同一个数据格式,一般有xml和json两种。JOSN会更常用。
  • 请求的参数,可以被封装成json格式,传入到后端,后端获取后,解析请求数据,操作数据库,获得数据库数据,打包成json格式,传给前端。
  • 这里,json是以小型数据库的形式出现了。js对json进行了编码和解码,java/php等也对json进行了编码和解码。

以上就是前后端交互方式的大致总结,涉及的基础知识有 http协议,java/php,js,josn等相关内容。


http://chatgpt.dhexx.cn/article/v31dFpC3.shtml

相关文章

前端和后端交互的方式

1.前端开发与后台交互的方式 (1)form提交 同步请求 (2)Ajax提交 异步请求 发送json对象 一 、Ajax:异步的javascript和XML 主要优点: 1.异步请求,不妨碍用户浏览页面或者其他操作。 2.局部刷…

树与树的存储结构+二叉树的遍历

树的存储结构: 三序说的是根节点的访问顺序 深度优先遍历(先序、 中序和后序) 沿着上图路径行走: 第一次来到某个结点时访问,所得序列为先序遍历序列; 第二次来到某个结点时访问,所得序列为中序遍历序列; 第三次来到某个结点时访问&#xff0…

2023年最新前端面试题

HTML 一、HTML5标记 <header></header> 头标记<nav></nav> 导航标记&#xff0c;表示页面中导航链接部分<!--main标记在一个网页中只能有一个&#xff0c;主要内容区域要区别--> <main></main> 主要内容标记<secti…

每日一题之二叉树

描述 输入一个整数数组&#xff0c;判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则返回 true ,否则返回 false 。假设输入的数组的任意两个数字都互不相同。 数据范围&#xff1a; 节点数量 0 \le n \le 10000≤n≤1000 &#xff0c;节点上的值满足 1 \le val \le 1…

2021最新最全前端面试题(包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等)

整理了一些前端面试题,希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大,主要针对初中级前端开发工程师。 篇幅过长,大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt:图片加载失败时,显示在网页上的替代文字title:鼠标(手机端该属性无…

CSS解决盒模型居中的问题,分分钟搞定!

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

培训前端开发机构,CSS文本样式值

一、简历的准备 简历制作是很重要的一个环节&#xff0c;一份好的简历会给面试官留下很不错的印象&#xff0c;也有助于你顺利通过简历筛选环节。 个人基本信息&#xff1a;主要是姓名&#xff0c;联系方式&#xff0c;邮箱&#xff0c;学历等&#xff1b;技术技能&#xff1…

学习路线图必不可少,CSS字体样式的使用

标签语义化&#xff1a; 语义和默认样式的区别&#xff1a; 默认样式是浏览器设定的一些常用tag的表现形式&#xff1b;语义化的主要目的就是让大家直观的认识标签和属性的用途和作用&#xff1b; 标签语义化作用&#xff1a; 当只有HTML页面时&#xff0c;没有CSS&#xf…

web前端开发自学难吗,CSS颜色基本样式

字节跳动算法题 链表 面试题&#xff1a;反转单向链表 题目需要将一个单向链表反转。思路很简单&#xff0c;使用三个变量分别表示当前节点和当前节点的前后节点&#xff0c;虽然这题很简单&#xff0c;但是却是一道常考题 以下是实现该算法的代码 var reverseList funct…

CSS的浮动属性,终获offer

前言 最近在准备面试&#xff0c;然后复习下之前写过的项目&#xff0c;书籍&#xff0c;笔记&#xff0c;文章。一看很多知识点都没有印象&#xff0c;最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的。有些开始怀疑人生了。 好了&#xff0c;废话少说&#xf…

CSS介绍,这些知识你必须拿下

前言 跳槽&#xff0c;这在 IT 互联网圈是非常普遍的&#xff0c;也是让自己升职加薪&#xff0c;走上人生巅峰的重要方式。那么作为一个普通的Android程序猿&#xff0c;我们如何才能斩获大厂offer 呢&#xff1f; 疫情向好、面试在即&#xff0c;还在迷茫踌躇中的后浪们&…

web开发在线培训,CSS浮动实战

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

CSS浮动实战,你还看不明白?

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

web设计与开发,CSS块元素

一、简历的准备 简历制作是很重要的一个环节&#xff0c;一份好的简历会给面试官留下很不错的印象&#xff0c;也有助于你顺利通过简历筛选环节。 个人基本信息&#xff1a;主要是姓名&#xff0c;联系方式&#xff0c;邮箱&#xff0c;学历等&#xff1b;技术技能&#xff1…

CSS介绍,含面试题+答案

前言 正式学习前端大概 3 年多了&#xff0c;接触前端大概 4 年了&#xff0c;很早就想整理这个书单了&#xff0c;因为常常会有朋友问&#xff0c;前端该如何学习&#xff0c;学习前端该看哪些书&#xff0c;我就讲讲我学习的道路中看的一些书&#xff0c;虽然整理的书不多&a…

CSS全局样式,帮你突破瓶颈

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

前端笔试错题总结

目录 题目分类HTMLinput的type属性如下&#xff1a; CSSJS算法操作系统计算机网络数据结构完全二叉树哈夫曼树二叉排序树大根堆 小根堆线性探查解决hash冲突 数据库浏览器 题目分类 HTMLCSSJS数据库算法操作系统计算机网络数据结构浏览器 HTML input的type属性如下&#xff…

图像处理之灰度变换

灰度变换 空间域增强空间域增强的特点线性变换分段线性变换非线性变换非线性变换图像前后灰度值关系直方图均衡 空间域增强 直接对构成图像的像素的灰度级的操作 输入图像 x ( j , i ) − − − > y ( j , i ) x(j, i)---> y(j, i) x(j,i)−−−>y(j,i) y ( j , i …

python图像处理之图像灰度化

灰度化 预备知识 在了解图像处理的基本操作之前&#xff0c;我们需要知道关于图像的一些基本知识。我们这里所说的图像处理实质上是数字图像处理&#xff0c;因为计算机只能对数字信号进行处理&#xff0c;因此存储在计算机中的图像都是实际图像经过离散化处理之后得到的。 图…

MATLAB图像灰度化—优化三种灰度化算法

一、彩色、灰度、二值、索引图像 彩色图像&#xff1a;每个像素由R、G、B三个分量表示&#xff0c;每个通道取值范围0~255。数据类型一般为8位无符号整形unit8。&#xff08;通常我们认为一个彩色图像是由三页组成的&#xff0c;分别是R、G、B&#xff0c;每一页都是一个二维矩…