正文 

当前位置： 首页 > 知识 > java教程

前后端交互(代码片段)

X-77 X-77     2023-02-27     576

关键词：

        最近开始学习跟数据有关的知识了，跟数据接触最多的就是后端人员了，而前端想要使用数据就必须跟后端人员打交道，先来了解一下一些基本的知识点吧。

1.什么是服务器和客户端

        上网的目的：通过互联网的形式来获取和消费资源

        客户端：在上网过程中负责获取和消费资源的电脑。

        服务器：在上网过程中负责存放和对外提供资源的电脑。

        客户端服务器的通信过程：请求-处理-响应

2. 什么是URL

        URL是英语Uniform Resource Locator的缩写，中文名叫统一资源定位符（或称统一资源定位器/定位地址、URL地址），有时也被俗称为网页地址（网址）。用来标识互联网上每个资源的唯一存放位置。

         URL地址一般由三部分组成：

                        1.客户端与服务器之间的通信协议

                        2.存有该资源的服务器名称

                        3.资源在服务器上具体的存放位置

3.http协议 

        即超文本传输协议，是互联网上应用最为广泛的一种网络协议。是基于请求/响应的模型。

        有关http协议知识可以查看博客：HTTP知识点一览_X-77的博客-CSDN博客

4.请求方式

        分为GET请求和POST请求。 

        GET请求通常用于获取服务器资源，可以理解为向服务器要资源；例如根据URL地址，向服务器获取html文件、css文件、js文件、图片文件等。

        POST请求通常用于向服务器提交数据，可以理解为向服务器发送资源；例如登录时向服务器提交的登录信息等。

        注意:POST请求安全性比GET高。

5.Ajax

           Ajax，使用JavaScript语言与服务器进行异步交互，传输的数据为XML。可以实现局部刷新，数据交互。

        更多ajax的介绍和使用方法可以查看博客：和Ajax斗志斗勇的日子_X-77的博客-CSDN博客

6.接口

        接口：在使用ajax请求数据时，被请求的URL地址，就叫数据接口，简称接口。

        接口文档：就是接口的说明文档，里面包含了对接口URL，参数以及输出内容的说明，参照接口文档能方便的知道接口的作用，以及接口如何进行调用。

        接口文档也是主要由后台开发者来写的，后台是最清楚数据库里面有什么数据，能返回什么数据。前端开发只是数据的被动接受者。所以接口文档也主要是由后台来完成的，前端只是接口文档的使用者。

7.数据格式

        现在的主流数据格式是XML和JSON。现在的主流数据格式是JSON。使用json.parse()将字符串转为对象，这个过程叫作反序列化。

8.查询字符串       

        将?放在url地址的末尾，后面跟上参数=值的形式，就是一个查询字符串。多个参数使用&连接。 

        当我们传递的参数是中文时，需要对文字进行编码和解码。

        encodeURL() 编码的函数

        decodeURL()解码的函数 

        //一个汉字由三组%组成
        var str = '黑马'
        var str2 = encodeURI(str)
        console.log(str2)   //%E9%BB%91%E9%A9%AC

        console.log('----------')
        var str3 = decodeURI('%E9%BB%91%E9%A9%AC')
        console.log(str3) // 黑马

9.同源、跨域

        同源：如果两个页面的协议、域名、端口都相同，则两个页面具有相同的源，三者中有任一不相同则是跨域。

        同源策略是浏览器提供的一个安全功能，不允许非同源网站之间进行资源的交互。

        跨域请求的发起过程：

        由图可知，我们可以正常发起跨域请求，但服务器为我我们返回来的数据会被浏览器拦截。所以当我们需要发起跨域请求时，需要使用JSONP请求。

        任何一个项目都需要前后端一起协作完成，在协作前一定要将基础知识掌握牢固啦。在合作完成项目的过程中更重要的是多交流，遇到问题一定要想办法解决！！

前后端交互(代码片段)

前端传JSON 此JSON有上下级关系每一个有孩子节点此节点有数据"standardspeciallistid":"10339","standardcostid":"0","costcode":"(A)","costcodelevel":"1","costcodename":"开发成本","costcodeparentid":"0","haschild":"","budgetvaria 查看详情

前后端交互模式(代码片段)

一、原生Ajax1.1ajax概述Ajax即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是一种用于客户端与服务端进行数据交互的一种技术。Ajax能够创建交互式、快速动态网页应用，无需重新加载整个网页的情况下，能够更新部分网页。... 查看详情

axios前后端交互工具学习(代码片段)

文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢？Axios前后端交互工具学习引言  Axios是一个异步请求技术，... 查看详情

axios前后端交互工具学习(代码片段)

文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢？Axios前后端交互工具学习引言  Axios是一个异步请求技术，... 查看详情

前后端交互(小白教学)(代码片段)

在我们的印象中什么是前后端交互呢?我们一个后端程序员为什么要去学习前端知识?前后端交互到底是靠什么而进行关联的呢?接下来我们带着这三个问题来阅读这边文章!!!1.前后端交互所谓前后端交互,即前后端交互为前端和后端... 查看详情

使用ajax简单实现前后端交互(代码片段)

实现效果：点击提交后：前端页面源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Ajax前后端交互_通过Ajax进行</title></head> 查看详情

测开之・《前后端交互axios》(代码片段)

...node.js中使用，原生的js或者使用jquery来发生请求进行前后端数 查看详情

vue前后端交互(代码片段)

异步调用异步效果:事件函数Ajax定时任务多次异步调用依赖多次调用异步,结果顺序不确定,如果需要固定顺序,必须使用嵌套Promise概述Promise是异步编程的一种解决方案,从语法上讲Promise是一个对象,从它可以获取到异步操作的消息;... 查看详情

javascript入门:前后端交互基础(dom,json,ajax)(代码片段)

JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)​参考教程图灵星球js入门教程文章目录JavaScript入门(4):前后端交互基础(DOM,JSON,AJAX)1.DOM引入简介DOM树JavaScript控制DOM主要方式：DOM的精彩解释2.JSON引入简介语法特征将JSON转换成JavaScrip... 查看详情

vue体验(前后端交互)(代码片段)

记录：263体验XMLHttpRequest、jquery、Promise、fetch、axios的异步方式调用后端接口。本例环境：后端：node.js、express。前端：Vue.js、HTML、CSS、jQuery、axios。方式：分别使用XMLHttpRequest、jquery、Promise、fetch、axios 查看详情

前后端交互流程(代码片段)

1.前后端交互:前后端交互，也可以理解为数据交互。前端需要获取（GET）的数据获取上传（POST）的数据，要通过请求来完成的，前端发送请求，后端接收到请求后，便进行对数据库的操作，... 查看详情

vue-resource的使用，前后端数据交互(代码片段)

vue-resource的使用，前后端数据交互1：导入vue与vue-resource的js js下载：  https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUgFyQ 注意如果是springBoot项目需要在配置文件中排除静态文件的拦截：   post方法：newVue(el:"#app", 查看详情

ssm框架前后端信息交互(代码片段)

一、从前端向后端传送数据常见的3种方式1、form表单的action：此方法可以提交form表单内的输入数据，也可同时提交某些隐藏但设置有默认值的<input>，如修改问题时，我们除了提交问题的相关信息，还需要将用户的编号提交... 查看详情

大事件--练习项目分享--实现前后端交互(代码片段)

项目介绍:实现的页面效果:前台页面:后台管理页面:以上的静态页面,通过HTML结构和CSS样式 实现 而页面的交互由JS来实现练习项目的目标:1.了解真实项目开发的架构设计（1）前端三层分离的编程思想（2）网络请求层单独... 查看详情

使用form表单的name属性简单实现前后端交互(代码片段)

实现效果：点击提交后：前端页面源码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Ajax前后端交互_通过name属性进行</title></head& 查看详情

前后端交互-进度丢失问题解决(代码片段)

今天在写项目的时候，遇到了一个问题，让我很是纳闷，就是数据库查询出来的id值（是通过雪花算法生成的一个19为随机数字） ，在传给前端的时候，前端同事用谷歌浏览器看的是Response返回的是后端的正确数据，但是previe... 查看详情

前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element(代码片段)

Axios进行前后端交互一.修改vue存在的文件路径二.解决跨域问题三.渲染数据到前端四.完整代码jshtml教学视频：5.axios请求后台——评论功能6.解决跨域问题cors——评论功能7.前端界面显示——评论功能前言：作者：神的... 查看详情

servletapi的使用案例-前后端交互的表白墙(代码片段)

...程序写web程序要重点考虑,数据交互的格式,要提前约定好前后端交互的格式,这件事叫做设计前后端交互接口(包括请求数据是什么格式,响应是什么格式,什么时候发请求,浏览器按什么格式解析)前后端交互的环节:1.点击提交(向浏览... 查看详情