精华内容
下载资源
问答
  • 前端post请求格式
    千次阅读
    2021-08-08 02:38:00

    //下载excel文件

    downLoadFile(url: any, data: any, fileName: any) {

    let other=this;//other.messageService.error("ssskkk")

    return new Promise((resolve, reject) =>{

    let that= this,

    options: any={},

    loginInfo=UserInfo.loginInfo;

    let tenatInfo= AppCommon.currentTenant || "";this.httpClient.post(url, data, {

    headers:new HttpHeaders().set('current_tenant', tenatInfo.tenantId)

    .set('current_app', AppCommon.currentAppcode || null),

    responseType:'blob',

    observe:'response'}).subscribe(res=>{//console.log(res);

    //var resHeaders = res.headers.toJSON() || {};

    console.log(resHeaders);

    /**

    * 关于Blob 如何获取内容

    * https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

    * reader.result 包含转化为类型数组的blob*/

    var reader = newFileReader();

    reader.readAsText(res.body,'utf-8');//reader.readAsArrayBuffer(res.body);

    reader.addEventListener("loadend", () =>{

    let toJson;try{/**

    * 尝试将接口返回的数据转换成json格式

    * 接口正常情况下返回的数据流的形式,转成json数据肯定会报错。

    * catch捕获后执行文件下载。

    *

    * 假如能够顺利转成json,说明接口是报错状态,返回的是错误数据*/toJson=JSON.parse(reader.result)

    }catch(error) {/** 获取reseponse headers中的 文件名*/

    //console.log("ssss");

    //alert("ssssssssssss");

    let disposition = res.headers.get('content-disposition');

    let status_code=res.headers.get('status_code');//console.log(status_code);

    //let resHeaders = res.headers.toJSON() || {};

    if(status_code=="11060"){//if(status_code==null){

    //console.log("ksjk");

    //that.messageService.error("ssssssssssss");

    //报错

    let status_msgs = res.headers.get('status_msg') ||res.headers.get('Status_msg')||[];

    let status_msg= status_msgs[0] || "";

    let base64= newBase64();

    status_msg= base64.decode(status_msg) || "服务异常";

    resolve({ error_msg:"数据量过大,不能正常导出,请缩小查询范围"})return;

    }

    let newfileName= '';if(disposition) {

    newfileName= decodeURI(disposition.split('=')[1]);//newfileName=newfileName.substring(0,fileName.length);

    fileName =newfileName;

    }this.downFile(res.body, fileName);//resolve();

    return null;

    }//报错

    reject(toJson.msg);

    });

    }, err=>{

    reject(err.msg);

    })

    });

    }

    更多相关内容
  • 前言 ...规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。...协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。实际上,开发者完全可以自己决定消...

    前言

    HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。类似于下面这样:

    <method> <request-URL> <version>
    <headers>
    
    <entity-body>

    协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。实际上,开发者完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以。
    但是,数据发送出去,还要服务端解析成功才有意义。一般服务端语言如 php、python ,java等,以及它们的 framework,都内置了自动解析常见数据格式的功能。服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。post提交数据有四种方式,下面介绍他们以及前端应该如何传参


    一、Content-Type设置为application/x-www-form-urlencoded

    传统的这种格式表单通过$(“form”).serialize()方法将参数序列化变成形如key&value的格式,然后传给后台解析现,如今serialize()在vue/angula/react等前端框架中都不怎么用了,如果要使用这种编码传输,可以使用npm的qs

    1.使用qs

    qs可以将json序列化如下:
    let a = {
      name:'june',
      age:26  
    }
    qs.stringify(a)  //"name=june&age=26" qs可以将josn对象转换成形如key&value
    
    如何使用:
    import qs from 'qs'
    let data = {code: 'fds', headImgUrl: '99', innerDemoVos: [{code: '篮球', name: 'xx'}, {code: '台球', name: '小芳'}]}
    let params = qs.stringify(data, {arrayFormat: 'indices', allowDots: true})
    
    // post的content-type的格式需要设置成application/x-www-form-urlencoded,data就是post请求体。
    let data = {code: 'fds', headImgUrl: '99', innerDemoVos: [{code: '篮球', name: 'xx'}, {code: '台球', name: '小芳'}]};
    // 将json对象转换成form表单的key&value的形式,包括复杂的数组对象,注意{arrayFormat: 'indices', allowDots: true}参数,一定要写,这个关系到数组对象转换成的格式后台是否可以解析,如果不写那么数组对象就是innerDemo[0].[code]: 篮球,这样后台是无法解析,只有innerDemo[0].code: 篮球的格式才可以解析,
    console.info(qs.stringify(data, {arrayFormat: 'indices', allowDots: true}));
    

    2.自定义全局方法

    //utils->utils.js
    export function objserialize (obj) {
      let str = ''
      for (var key in obj) {
        str += key + '=' + obj[key] + '&'
      }
      return str.slice(0, -1)
    }
    
    //在组件中引入
    import {objTostring} from "@/utils/utils"
    let data = {
              name: 'xiaoming',
              age: 18,
            }
    let params = objTostring(data) //name='xiaoming'&age=18

    二、Content-Type设置为application/json

    这种编码格式现在比较流行推荐使用,前端传参不用管数据结构有多复杂层次有多深直接以json形式传就ok,不用像上面的转key&value的形式。实例

    let param = {
        name : 'xiaohong',
        age: 18,
        sex: '女',
        goods: {
            a: 1,
            b:2
        }
    }
    传参直接传json对象param,非常简单

    三、Content-Type设置为 multipart/form-data

    这也是常见的post请求方式,一般用来上传文件图片等,各大服务器的支持也比较好。

    //在vue的js中
    data(){
        return{
            params:{
                file:"",//上传文件
            }
        }
    }
    methods:{
        update(){
           let fd = this.transformData(this.params)
           let api = '/api/updateFile'
           this.axios.post(api,fd,{
                headers:{
                    "content-type":"multipart/form-data"
                }
                }).then(res=>{
                console.log(res)
                })
        },
        // 转化为formdata格式
        transformData(obj){  
            let fd = new FormData()
            Object.keys(obj).forEach(key=>{
                fd.append(key,obj[key])
            })
            return fd
        }
    }

    四、Content-Type设置为 text/xml

    它是一种使用 HTTP 作为传输协议,XML 作为编码方式的远程调用规范。典型的 XML-RPC 请求是这样的: 

    POST http://www.example.com HTTP/1.1 
    Content-Type: text/xml 
    
    <!--?xml version="1.0"?--> 
    <methodcall> 
        <methodname>examples.getStateName</methodname> 
        <params> 
            <param> 
                <value><i4>41</i4></value> 
             
        </params> 
    </methodcall> 
    

    XML-RPC 协议简单、功能够用,各种语言的实现都有,但是个人觉得略显臃肿,没有Json格式简单灵活

    总结

    平时开发中有时候会出现参数格式错误一定要注意查看Content-Type设定值,以及跟后端沟通

    展开全文
  • 前端 - POST提交数据的三种请求方式

    千次阅读 2021-08-26 17:00:33
    application/json 现在这种格式也变得越来越常用了,主要是便于处理复杂对象,JSON 格式支持比键值对复杂得多的结构化数据 postJson = (url, data = {}) => { return this.fetch(url, { headers: { 'Content-Type':...

    一、定义和用法

    我们知道,HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。
    规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。类似于下面这样:

    <method> <request-URL> <version>
    <headers>
    
    <entity-body>
    

    Content-Type就是指 HTTP 发送信息至服务器时的内容编码类型,服务器根据编码类型使用特定的解析方式,获取数据流中的数据。

    协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须 使用什么编码方式 。实际上,开发者完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以。

    但是,数据发送出去,还要服务端解析成功才有意义。一般服务端语言如 php、python 等,以及它们的 framework,都内置了自动解析常见数据格式的功能。
    服务端通常是根据请求头(headers)中的 Content-Type 字段来获知请求中的消息主体是用何种方式编码,再对主体进行解析。

    所以说到 POST 提交数据方案,包含了 Content-Type 和消息主体编码方式两部分。

    二、Content-Type

    这里主要关注 Content-Type 和 data 的处理

    1. application/json

    现在这种格式也变得越来越常用了,主要是便于处理复杂对象,JSON 格式支持比键值对复杂得多的结构化数据

    postJson = (url, data = {}) => {
        return this.fetch(url, {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          method: 'POST',
          body: JSON.stringify(data)
        });
      };
    

    2. multipart/form-data

    这种格式经常用于上传文件

    postFormData = (url, data = {}) => {
        const formData = new FormData();
    
        Object.keys(data).forEach(key => {
          formData.append(key, data[key]);
        });
    
        return this.fetch(url, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          method: 'POST',
          body: formData
        });
      };
    

    3. application/x-www-form-urlencoded

    当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1& amp; amp;name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url。

    当action为post时候,浏览器把form数据封装到http body中,然后发送到server。

    所有数据变成键值对的形式 key1=value1&key2=value2的形式,并且特殊字符需要转义成utf-8编号,如空格会变成 %20;

     post = (url, data) => {
        return this.fetch(url, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
          },
          method: 'POST',
          body: qs.stringify(data)
        });
      };
    

    这种转化为键值对的方式只适合于简单的对象,如果是复杂的嵌套对象,还是应该用 application/json, x-www-form-urlencoded 会转成复杂的格式

    param2 = {
          a: '1111',
          b: {
            c: '2222',
            d: '333'
          }
        };
    ---->
    a=1111&b[c]=2222&b[d]=333
    

    参考链接
    POST提交数据之—Content-Type的理解;
    四种常见的 POST 提交数据方式 专题

    展开全文
  • 需要安装qs插件 npm install qs 在script里 import qs from 'qs' ...还需要设置请求头 methods:{ do_register: function () { console.log(this.username +"=="+ this.password +"=="+ this.code +"=="+ ...

    需要安装qs插件
    npm install qs

    在script里

     import qs from 'qs'
    

    还需要设置请求头

    methods:{
                do_register: function () {
                    console.log(this.username +"=="+ this.password +"=="+ this.code +"=="+ this.phone);
                    this.axios.post("http://127.0.0.1:5000/users/?action=register", qs.stringify({
                        "username": this.username,
                        "password": this.password,
                        "phone": this.phone,
                        "code": this.code
                    }),{
                        headers:{
                            'Content-Type': 'application/x-www-form-urlencoded',
                        }
                    }).then(response => {
                        console.log(response);
                        let data = response.data;
    
                        if (data.status === 201){
                        	//vue里的页面跳转功能
                            this.$router.push("/login");
                        }
                    })
                },
                get_code: function () {
                    console.log("获取验证码");
                    console.log(this.phone);
                    this.axios.post("http://127.0.0.1:5000/users/?action=get_code", qs.stringify({
                        phone: this.phone
                    }), {
                        headers:{
                            'Content-Type': 'application/x-www-form-urlencoded',
                        }
                    }).then(response => {
                        console.log(response)
                    })
                }
            }
    

    另一种方式,在后端,request.json.get
    以 json 格式接收


    在项目的 main.js 设置

    import axios from 'axios'
    
    Vue.config.productionTip = false;
    
    let ajax = axios.create({
      baseURL: "http://127.0.0.1:5000",
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    });
    
    // 将ajax 请求工具 放到 Vue上
    Vue.prototype.axios = ajax;
    
    <script>
        // import axios from 'axios'
        import qs from 'qs'
    
        export default {
            name: "learn",
            methods: {
                send_post: function () {
                    this.axios.post("/pays/", qs.stringify({
                        "username": "Rock",
                        "password": "110"
                    }))
                        .then(response => {
                            console.log(response)
                        })
                    // let ajax = axios.create({
                    //     baseURL: "http://127.0.0.1:5000"
                    // });
                    // console.log(ajax);
                    // ajax.post("/pays/")
                    //     .then(response => {
                    //         console.log(response)
                    //     })
                },
                send_patch: function () {
                    this.axios.patch("/pays/")
                        .then(response => {
                            console.log(response)
                        })
                },
                send_delete: function () {
                    this.axios.delete('/pays/')
                        .then(response => {
                            console.log(response)
                        })
                },
                print_params: function () {
                    console.log(this.$route.params.id);
                    console.log(this.$route.query);
                    console.log(this.$route)
                }
            }
        }
    </script>
    
    
    展开全文
  • 前端post请求中body和query传参

    千次阅读 2021-04-10 16:31:32
    前端发送请求最常用的是get请求还有post请求 get请求只能传query参数,query参数都是拼在请求地址上的 post可以传body和query两种形式的参数 /* 登陆请求 */ export function login(data) { return request({ url:...
  • 我们的程序使用的是前后端分离,前端使用vue,所有的请求都做的拦截的设置: // request拦截器设置 service.interceptors.request.use( config => { switch (config.urlType) { case 'autoService': conf
  • 前端post请求报400错误

    万次阅读 2019-08-29 10:27:28
    前端post请求报400错误 发布时间: 2019-06-05 18:28:54 400的错误是由于发送请求参数没有成功 原因:参数名称类型没有对上;或者参数格式不正确 参数格式不正确,解决方法:格式化传递给后台的参数 1.使用axios ...
  • 前端POST请求接收不到参数

    千次阅读 2021-03-30 13:23:19
    首先contorller 确定...这里其实是属性命名不规范,没遵循驼峰命名法,驼峰命名法属性首字母要小写 导致post请求的json参数跟实体中参数对应不上 解决方案 实体的get() set()方法 在set()方法上加上注解 @JsonProper
  • 前端get/post请求下载文件多种方式

    千次阅读 2021-09-16 10:53:25
    2、POST请求 第一种 前后端约定格式为字符串格式 $.ajax({ url:urls, type:"POST", data:args, responseType:'blob', success:function(res){ download(res,$('#allExport_eventName').val()) } }); function...
  • } 在我们不对axios的请求头进行设置的时候,axios的post请求默认请求头中Content-Type类型为application/json 3、错误情况 3.1 后端实体类接收参数,但是缺少注解@RequestbBody注解,前端使用默认的Content-Type...
  • 仍然以新闻站点为例,读者对文章的注解应该通过 POST 请求实现,因为在注解提交之后站点已经不同了7 在FORM提交的时候,如果不指定Method,则默认为GET请求,Form中提交的数据将会附加在url之后。GET请求请提交的...
  • HTTP的GET请求与POST请求 HTTP请求方式有GET、POST、PUT、DELETE等八种,最常见的就是GET、POST,下面说一下GET请求,很简单。 GET是按照规定参数只能写在URL里面(虽然可以有请求体但是不符合规定),没有请求体也...
  • POST请求@RequestParam:① 用来处理(前端)Content-Type: 为 application/x-www-form-urlencoded或者form-data编码的内容② 该注解有两个属性: value、required; value用来指定要传入值的id名称,required用来指示...
  • 1、contentType: ‘application/x-www-form-urlencoded’ + data:data 前端ajax-post var data = { id: id ,name:"zss"}; $.ajax({ url: "xxx/acceptPara", type: "post", data: data, dataType: 'json', co
  • vue 前端js代码片段,如下...1.vue前端post请求采用的是json数据格式 2.而用post测试工具采用的是form表单方式 所以,最后问题是定位出来了。 总结,还是粗心并且没有把数据传输格式想明白。 通过以下代码片段...
  • 前端为Vue项目发送Post请求,传输数据到后端。 后端为Tomcat-Servlet,通过request.getParameterMap()解析不到数据。 解析 经过分析和各种调试,发现前端发送的信息格式为Payload Data,该种格式为axios默认格式,以...
  • 后端返回文件流,前端post请求接收并下载
  • 最近项目中用到axios比较多,所以就把axios完整的接口请求格式整理出来,方便以后自己复习或他人使用,如果觉得对您有用请点个赞(skr) axios GET请求 axios POST请求 两者之间的区别 1.axios GET 请求 var _...
  • 如果不是404,那就说明地址没问题。 检查接口是否指定请求方式 如果都没问题,看一下访问的地址,是http还是https。我这个就是https写成了http,就都是get了,找了半天
  • 前端传参参数各种格式详解一、form-data二、application/x-www-form-urlencoded总结 一、form-data form-data格式一般是用来进行文件上传 ...表单的传参格式,常见的post传参格式 data等于一个对象
  • 问题:前端使用uni-app的uni.request发送post请求时,携带data参数会被json序列化 对于 POST 方法且 header[‘content-type’] 为 application/json 的数据,会进行 JSON 序列化。官方文档 这就导致我写好的登录...
  • 原来前端的请求头中的Content-Type设置的是json格式的,而json格式需要对应post请求的接口参数需要对应是@RequestBody; 如果想使用RequestParam,那么则需要前端的Content-Type要设置成application/x-...
  • 前端发送get和post请求的三种方式

    万次阅读 2017-05-15 11:51:24
    1. 用XMLHttpRequest对象发送请求(1)get请求var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 ...
  • post请求python flask获取前端发来的参数有三种方式 1、放在params里面 from flask import request # params拿请求 data = {} for key in request.args: data[key] = request.args.get(key) file_type = ...
  • 前端post请求中body和query传参的区别

    万次阅读 2020-04-20 14:35:43
    前端发送请求最常用的是get请求还有post请求 get请求只能传query参数,query参数都是拼在请求地址上的 post可以传body和query两种形式的参数 如下: /* 编辑项目列表 */ export function editProjectList(params) { ...
  • 我用默认的post方法发送数据的时候发现后端获取不到数据,然而在network中看到参数是的确传出去的了。...缺点:其他请求格式的数据也会被重新格式化(PUT,PATCH) import axios from "axios" //引入 //设置axios.
  • 解决前端post跨域问题

    千次阅读 2020-11-19 13:12:58
    网上post跨域解决的问题方案一箩筐,但是真正能用得上的我还真是一个没看到,基本上都是基于jsonp的...好了,言归正传,在具体说解决办法之前我先说一下为什么会有跨域的问题,post跨域问题本身是因为请求的域名和用于
  • 前端 服务端 这个位置有个坑...下午一直在报415请求格式不对的问题...然后看到@consumes的注解指定了入参的规则....注释掉就可以发送请求进来了

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 204,644
精华内容 81,857
关键字:

前端post请求格式