天道酬勤,学无止境

前后端交互的数据格式--form和json

前后端交互的数据格式有两种

form格式(表单格式)

form格式是一种“键值对”的数据格式,比如:a=1&b=2&c=3

json格式

json格式为一个对象:{“a”:1,“b”:2,“c”:3}

两种数据之间的转换

json转form需要用到qs转换,例如:
let a={“a”=1,“b”=2}
let b= qs.stringfy(a)对象转换为字符串,属性间使用&连接

qs需要引用

form转json用json方法转换即可,例如
let b = JSON.stringify(a)

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 前后端数据交互
    前后端数据交互 前后端数据交互方式有三种: 1、form表单 2、ajax 3、websocket form表单 <form action="/form.html" method="post/get"> <input type="text" name="username" placeholder="username"> <input type="password" name="password" placeholder="password"> <input type="submit"> </form> 点击“提交”按钮,以 post 或 get 的方式提交到 form 表单 action 中的地址。此时就会向服务器发送一个请求,服务器会接受并处理提交过来的 form 表单,最后返回一个新的网页。 get & post 1、get 将 header 和 data 一起发送,服务器返回 200,只发送一次 TCP 请求;post 则先发送 header,服务器返回 100,再发送 data,服务器返回 200,会发送两次 TCP 请求。 2、get 参数通过 url 传递,因此不安全;post 放在 request body 中,将参数直接发送给后台。 3、get 请求只能进行 url 编码;而 post 支持多种编码方式。 4、get 请求参数会被完整保留在浏览历史记录里;而
  • Python中flask框架list类型和字典类型数据前后端交互以及表单提交
    Python中flask框架表单提交 Web框架中前后端交互是开发中必不可少的流程,下面我们来介绍一下在pycharm中是如何进行前后端交互以及表单提交的 - 前端向后端进行表单提交 1、 html页面代码如下 action属性是指提交到的地址或者页面,method是指提交方法,有POST和GET等方法 <body> <form action="{{ url_for('result')}}" method="POST"> <p>姓名:<input type="text" name="姓名"> </p> <p>年龄:<input type="text" name="年龄"> </p> <p>性别:<input type="text" name="性别"> </p> <p>单身:<input type="text" name="单身"> </p> <p><input type="submit" value="提交"></p> </form> </body> 2、后端路由控制接收提交的表单如下 这里的’/result’是接收表单之后返回的界面,methods=[‘post’,‘get’]这里是两种提交方法都支持,下面分情况讨论:注释写的很清楚了。 #接收表单提交的路由,这里需要指定方法为post @app.route('/result',methods=['post','get'])
  • ssm项目用ajax进行前后端交互的一些总结
    首先,我讲讲我对ajax技术的一些认识:ajax技术即为了让页面实现局部的刷新,而不是每次都是表单提交到后台 后台再进行页面的跳转。 下面,我将演示用jQuery的ajax方法提交数据到后台,及后台获取这些参数的方式, 传单个参数时: js中只需要3个属性就可以完成 后台的controller层也只需要让接收方法的形参与data中参数名相等,即可以收到前台内容 $.ajax({ url:"/项目名/order/initsupr",//提交地址 data:{afterId:beforId}//需要传给后台的参数(后台获取时需要的键:前台内容) success:function(data) {//成功时返回值在data中} error:function(data) {//成功时返回值在data中} }) 后台获取的方式: //1、直接让方法形参名与前端传入参数名相同,当然不同时才用@ModelAttribute()给获取前端相应的参数 @RequestMapping(value="/goodsListBy",method=RequestMethod.POST) @ResponseBody public List<Goods> goodsListBySuprid(@ModelAttribute("sid")int sid) { List<Goods> list=goodsService
  • Django自学——笔记7(Ajax、分页器)
    每日测验 """ 今日考题: 1.choices参数的应用场景有哪些,如何获取该字段的值 2.django是什么模型的框架,简述MTV与MVC模型 3.多对多表关系有几种创建方式,各有什么特点? 4.什么是ajax,请手写出ajax的基本语法结构及重要参数含义 """ 昨日内容回顾 在django部分,如果你写代码的时候报错了 """ 1.pycharm窗口提示,前端console界面 2.仔细核对代码(单词写错写多) 3.浏览器缓存没有清除 4.端口号可能冲突了,一直跑的是之前的项目 5.重启你的计算机 (自己学会百度搜索问题,出现bug千万不要慌 要冷静分析 自己想出一个排查思路) """ 图书管理系统图书的增删改查 """ 将你之前所学的知识点尽量全部都用上(每个人都应该自己能够独立的完成) """ choices参数 """ 在设计表的时候 针对可以列举完全的可能性字段 一般都是用choices参数 """ gender_choices = ((1,'male'),(2,'female'),(3,'others')) gender = models.IntegerField() # 针对具有choices参数的字段 存储数据的时候还是按照字段本身的数据类型存储没有其他的约束,但是如果你存的字段在你列举的范围内 那么可以自动获取对应关系 user_obj.gender #
  • HTTP请求Content-Type你知道是做什么的吗?
    细心的同学肯定都在网页的头部发现过一个Content-Type标签,你只知道是用来做HTTP请求的但你并不知道它究竟都能干什么,下面小千就来带你了解一下Content-Type。 1、概念 Content-Type表示内容类型和字符编码。内容类型也叫做MIME类型。是Internet Media Type,互联网媒体类型。在互联网上传输的数据有不同的数据类型,HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签,用于区分数据类型。 请求头中的content-type,就是 B端发给S端的数据类型描述 。即告诉服务器端,我给你传的数据是某种类型的,服务器端针对不同类型的数据,做法当时是不相同的。就像,我们平时面对,人,猪,狗等不同类型的动物做法不同。见到狗,你得“汪汪汪”,见到人,你得说”您好“。 响应头中的content-type,就是 S端发给B端的数据类型描述 。即告诉浏览器端,我给你发的是什么样格式的数据,那么浏览器端针对不同类型的数据,处理方法不同。 2、语法格式 不管是出现在请求头还是响应头里,都是键值对的方式。 content-type: 值,如:Content-Type: text/html; charset=utf-8。 解释:如果在响应头里,有Content-Type: text/html; charset=utf-8。表示
  • 前后端交互的两种方式
    方式一:表单提交 表单(form):表单用于收集用户输入信息,并将数据提交给服务器。是一种常见的与服务端数据交互的一种方式 //1. action:指定表单的提交地址 //2. method:指定表单的提交方式,get/post,默认get //3. input的数据想要提交到后台,必须指定name属性,后台通过name属性获取值 //4. 想要提交表单,不能使用input:button 必须使用input:submit php获取表单数据 //$_GET是PHP系统提供的一个超全局变量,是一个数组,里面存放了表单通过get方式提交的数据。 //$_POST是PHP系统提供的一个超全局变量,是一个数组,里面存放了表单通过post方式提交的数据。 get与post的区别 //1. get方式 //1.1 数据会拼接在url地址的后面?username=hcc&password=123456 //1.2 地址栏有长度限制,因此get方式提交数据大小不会超过4k //2. post方式 //2.1 数据不会在url中显示,相比get方式,post更安全 //2.2 提交的数据没有大小限制 //根据HTTP规范,GET用于信息获取,POST表示可能修改变服务器上的资源的请求 http协议 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则 HTTP协议
  • Vue 前后端交互 (Fetch)
    须知少年凌云志,曾许人间第一流 文章目录 Fetchtext() 方法使用fetch 请求参数GET DELETE 形式POST PUT 形式 序列化与反序列化JSON.parse()JSON.stringify() Fetch 响应结果 Fetch Fetch API是新的ajax解决方案 Fetch会返回Promisefetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。fetch(url, options).then(), 第一个参数请求的路径 Fetch会返回Promise ,使用then 拿到请求成功的结果 text() 方法使用 text() 方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据 <script type="text/javascript"> fetch('http://localhost:3000/fdata').then(function(data){ return data.text(); }).then(function(data){ // 在这个then里面我们能拿到最终的数据 console.log(data); }) </script> fetch 请求参数 GET DELETE 形式 其中 GET 请求方式 又可以分为 传统URL和Restful 格式
  • 详解前后端交互原理及方法
    前后端交互我们首先要知道前端要做的工作有哪些?后端要多的工作有哪些? 1. 页面架构的搭建是由我们前端负责来写的; 2.其次就是数据的交互了,也就是从后台拿数据; 3.数据交互的作用就是从后台拿到数据渲染到页面; 前端请求的url有谁来写? 1.url 主要有后台来写,写完给前端; 2.如果后台查询数据,需要借助查询条件才能查询前端需要的数据时后台会要求前端提供相关的的查询参数,这里查询的参数就是url请求的参数; 接口文档主要有谁来写? 1.接口文档也是主要由后台开发者来写; 2.因为直接跟数据打交道的就是后台,后台是最清楚,数据库里面有什么数据,能返回什么数据.前端开发只是数据的被动接受者.所以接口文档也主要是由后台来完成的; 3.前端只是接口文档的使用者,使用过程中,发现返回的数据不对,则需要跟后台进行商量,由后台来修改; 4. 前端不要随意更改接口文档,除非在取得后台开发人员的同意的情况下; 5.接口文档主要由后台来设计修改,前端开发者起到了辅助的作用; 前端开发与后台交互的数据格式主要是什么? 主要格式有四种:xml json form iframe 现在最常用的就是 json 格式,其他几种用的不多但是要知道; 前后端开发交互的原理是什么? 1.在项目中,我们首先先整理前端的请求的参数有哪些,后台会返回相应的参数; 2. 前端把页面写好之后会给后台要一个接口地
  • 超详细总结:前后端数据交互原理
    最近开始接触前后端的一些知识,查了很多资料,今天把互联网产品的前后端数据交互做个总结留做笔记。 互联网产品的前后端数据交互是通过一个通讯协议完成。前后台交互的协议主要包括HTTP,FTP,SMTP,TELNET,POP3…本文仅总结HTTP协议。 HTTP协议 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议,是一个基于TCP/IP通信协议来传递数据,也是互联网上应用最为广泛的一种网络协议。 HTTP的主要特点 简单快速:客户向服务器请求服务时,只需传送请求方法和路径。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快;灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记;无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间;无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息,则它必须重传,这样可能导致每次连接传送的数据量增大。另一方面,在服务器不需要先前信息时它的应答就较快;支持B/S及C/S模式 无连接、无状态的理解:
  • 前后端传输数据的编码格式
    前后端传输数据的编码格式: 1. urlencoded 【请求头RequestHeader中默认:Content-Type:application/x-www-form-urlencoded】 2. formdata 3. application/json django后台request.POST只能解析urlencoded、formdata数据格式的数据【或者说只要是什么等于什么&什么等于什么:username=admin&pwd=000,djagno就会放入POST中】 如果是json格式,原生django是不会处理的,需要自己从body中取出来自行处理。 request.data: drf框架主要就是json格式交互,request.data 不管前端传数据的编码格式是urlencoded, formdata或者json都从里面取 request.query_params 是原来django原生的GET中的数据,请求地址中问号后的数据 request. form表单默认的编码格式是urlencoded不支持发文件(只能把文件名发过去) 它所对应数据格式 username=jason&password=123 formdata django会帮你把文件数据取出来 放入request.FILES里面 专门用来传文件的 Ajax默认提交的编码格式也是urlencoded
  • 三、vue前后端交互(轻松入门vue)
    轻松入门vue系列 Vue前后端交互 六、Vue前后端交互1. 前后端交互模式2. Promise的相关概念和用法Promise基本用法then参数中的函数返回值基于Promise处理多个Ajax请求demoPromise常用API 3. fetch进行接口调用fetch基本用法fetch请求参数fetch响应结果 4. axios进行接口调用axios基本用法axios的常用API(参数传递) 5. asyns/await接口调用async/await的基本用法多个异步请求的场景 六、Vue前后端交互 项目中一般结合async/await语法使用axios调用接口 1. 前后端交互模式 1. 接口调用方式 原生ajax、基于jQuery的ajax、fetch、axios 2. 传统的URL 格式:schema://host:port/path?query#fragment schema:协议,例如http、https、ftp等。host:域名或者IP地址。port:端口,http默认端口80,可以省略。path:路径,例如/abc/a/b/cquery:查询参数,例如uname=lisi&age=12fragment:锚点(哈希Hash),用于定位页面的某个位置 3. Restful形式的URL HTTP请求方式 GET 查询POST 添加PUT 修改DELETE 删除 2
  • SSM前后端数据交互(通过表单和Ajax)
    一、搭建SSM开发环境 请参照 链接 一个基于IDEA搭建SSM的教程,非常详细。 二、表单交互 这部分是普通表单形式: <h2>测试添加</h2> <form action="account/save" method="post"> 姓名:<input type="text" name="name" /><br/> 金额:<input type="text" name="money" /><br/> <input type="submit" value="保存"/><br/> </form> 后台处理代码: @RequestMapping("/account/save") //springMvc会将参数自动封装成对象 public void save(Account account, HttpServletRequest request, HttpServletResponse response) throws IOException { //先执行保存操作 accountService.saveAccount(account); //重定向到查询全部的控制器方法(重定向是第二次请求) response.sendRedirect(request.getContextPath()+"/account/findAll"); return; } @RequestMapping("
  • Spring+SpringMVC+MyBatis整合进阶篇(四)RESTful实战(前端代码修改)
    页面的设计和美感与原来的项目并没有太多差别,这也是大部分朋友诟病这个项目的地方,由于暂时只是做一些功能性的实现和优化,因此页面的重构放在了后面的工作计划中,前端样式这次也只是修改了登录页面,其他页面并没有修改,因为这个阶段想要增加的是RESTful和缓存模块以及其他中间件的整合,至于页面重构会放到下一个项目中,目前的easyui会完全剥除掉,计划使用vue + ssm api实现一个前后端分离的实战项目。 前言 前文《RESTful API实战笔记(接口设计及Java后端实现)》中介绍了RESTful中后端开发的实现,主要是接口地址修改和返回数据的格式及规范的修改,本文则简单介绍一下,RESTful过程中前端代码的改变以及前后端分离的一些想法。 整合代码及修改计划 在这次的代码修改过程中,后端改动相对较大,而前端代码的改动更多的是配合后端修改,主要是请求接口的url及js的ajax请求部分,修改后的代码更加符合RESTful规范: function saveArticle() { var title = $("#title").val(); var addName = $("#addName").val(); var content = UE.getEditor('myEditor').getContent(); var id = $("#articleIdfm").val()
  • 前后端数据交互之格式
    Servelt里面的setContentType: response.setContentType("application/json;charset=UTF-8"); 当setContentType里属性为application/json时,前后端数据交互时,数据格式为json对象或者json对象数组; response.setContentType("text/html;charset=UTF-8"); 当setContentType里属性为text/html时,前后端数据交互时,数据格式为json字符串或者json数组字符串;当后端给前端传回数据时,前端ajax中需要使用JSON.parse(参数); 方法把字符串转换成json对象;当前端向后端发送数据时,需要使用JSON.stringify(参数);方法将数据转换成JSON字符串后,传给后端(ajax没有使用dataType:"JSON")。 JSON.parse()方法: JSON.stringify()方法:将json对象或者json数组转换成字符串传给后端。 转载于:https://www.cnblogs.com/mshanBlog/p/10703672.html 来源:https://blog.csdn.net/dmgowu8393/article/details/102361304
  • 使用springBoot+Mybatis,Post以及使用json格式进行前后端交互时的注意事项
    1. S p r i n g B o o t 的 方 法 代 码 SpringBoot的方法代码 SpringBoot的方法代码 p o s t m a n 中 在 请 求 体 中 应 当 注 意 postman中在请求体中应当注意 postman中在请求体中应当注意 传入的json格式的数据的各个属性应当和你的代码中定义的属性相同, 而不是和你的数据表的列名相同。例如左图中name属性对应的值发生了改 变,但userName的对应的值就没有发生改变。 未待续完。 来源:https://xiaokangxiaobai.blog.csdn.net/article/details/107576160
  • 基于Promise 接口调用方式 ajax fetch axios async/await 前后端交互
    Promise用法接口调用 fetch 用法接口调用 axios 用法接口调用 async/await 用法 一 Promise用法 Promise resolve成功状态 reject拒绝状态 then是前面返回promise的处理 Promise的相关概念 es6新语法 用来处理异步编程 promise是一个对象 可以获取异步操作的消息 好处: 可以避免多层异步调用嵌套的问题(回调地狱)提供了简洁的API 使得控制异步操作更加容易 基于promise发送ajax请求 // 封装一个独立的函数 function queryData(){ return pro = new Promise((resolve, reject)=>{ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = () =>{ if(xhr.readyState != 4) return; if(xhr.readyState == 4 && xhr.status == 200){ // 处理正常的情况 resolve(xhr.responsetext) }else{ // 处理异常情况 reject('服务器错误') } } xhr.open('get', url); // 准备发送前的参数 xhr.send(null); }); } //
  • spring boot与VUE的前后端交互
    一、准备 默认认为会了简单的spring boot知识和vue知识 1、前端 先安装好vue cli,没有的点这里 2、后端 后端IDEA安装vue.js插件就OK了 二、创建前端VUE项目 就进入CMD,挑个好路径,输入vue ui 然后打开IDEA,导入文件就可以 三、IDEA打开VUE与操作 1、打开 上面我们是通过vue cli 来创建一个VUE项目而已,其他的可以关闭了 在IDEA中,Terminal控制台输入npm run serve就可运行VUE 2、VUE的结构 先看下App.vue的文件 <template> <div id="app"> <div id="nav"> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </div> <router-view/> </div> </template> 这里的两个router-link to="xxx",里面的xxx就是一个访问路径而已,就有点类似spring MVC的映射那样,流程是: 先写VUE文件,写要展示的东西在router/index.js中导入刚写的VUE,然后通过path,name和component3个属性来定位他在App.vue中写router-link to="xxxx" 3
  • vue框架之前后台交互、element-ui
    文章目录 vue框架之前后台交互、element-uivuex(了解)前端存储数据库总汇cookielocalStoragesessionStoragevuex(store) 前后台交互方式(重点)axios同源策略-跨域问题前后台分离项目交互流程异步请求细节element-uijq+bsDjango国际化配置小结 vue框架之前后台交互、element-ui vuex(了解) 注:可以完成任意间组件信息交互(移动端) vuex是实现任何组件间的信息交互,可以理解为全局的一个单例,为任何一个组件共享vue仓库里的数据 在任何一个组件的逻辑里,都可以访问仓库 现在仓库里(store/index.js)定义变量,用来村粗共享数据 state:{info:‘共享数据的初始值’} 在组件逻辑中获取仓库值 let 变量 = this.$store.state.info 在组件逻辑中更新仓库值 this.$store.sate.info = ‘新值’ 注:vuex通常运用在开发移动端项目,pc端项目可以用localstorege喝sessionstorege数据库来替换 原因:vuex中的数据,会在页面刷新后,重置到store/index.js配置的默认值 前端存储数据库总汇 cookie 以字符串形式存储,数据有过期时间(过期时间到,数据失效,否则永远有效) localStorage
  • springmvc如何把对象和json相互转换?===完成前后端数据交互json
    在上篇《数据转换&数据格式化&参数校验》的文章中介绍了json处理的底层原理问题,原理只是便于理解,主要的还是如何使用? 写一个前后端分析的页面展示,数据写死 先导入fastjsnjar包 配置web.xml和servlet。xml 写一个pojo() 写一个controller去获取数据库数据 写一个list。html用以接收js获取的后端信息(以后看不到jsp都是HTML,通过js去取值再显示给html) 写一个listpage.js用于法ajax请求去获取数据 访问html下的listHTML 》》》所有的前后端交互都是通过发送数据接受数据实现的,而只有json才能实现数据的交互,所以就要解决对象和json的相互转换问题。 1,jackson: HttpMessageConverter 这个对象是为了将请求参数转换为你想要的的对象,也可以将响应参数转为你想要的的对象。 发送数据 //@ResponseBody//就是声明该方法不走视图解释器,走HttpMessageConverter 1 导入依赖 <!-- Jackson springMVC默认的Json解决方案选择是 Jackson,所以只需要导入jackson的jar,即可使用HttpMessageConverter。--> <dependency> <groupId>com.fasterxml.jackson.core
  • javascript-前后端交互模式-简介
    javascript-前后端交互模式-简介 目录 文章目录 1、相关知识2、异步接口调用方式3、URL地址2.1、传统形式的URL2.2、Restful 风格的URL2.2.1、http请求方式2.2.3、示例: ***后记*** : 内容 图示0-1: 随着前后端分离,前后端交互技术不断更新,下面我们看下前后端交互相关知识。 1、相关知识 前端通过相关接口发送请求,后端接收请求,处理返回响应结果,前端接收响应结果,完成交互。 这里以ajax为例: $.ajax({// 接口调用方式 url: 'http://www.gaogzhen.com/books, // URL type: 'get', // 请求方式 data: {uname: 'zhangsan', age: 32}, // 请求参数 dataType: 'json', // 返回数据类型 success(data) { // 请求成功执行的回调函数 console.log(data); }, error(err) { // 请求失败执行的回调函数 console.log(err) } }) 这里我们主要介绍前后端交互中前端部分,相关知识: 异步调用:与同步先比,极大提高资源利用率接口调用方式:见#2URL:全球统一资源定位,见#3请求方式(HTTP协议):自行查询相关文档JSON:传输数据的格式