美文网首页程序员
前端 GET&POST 两种请求方式

前端 GET&POST 两种请求方式

作者: LOWINC | 来源:发表于2017-01-18 20:12 被阅读0次

作者 MaBond
参考 JavaScript高级程序设计(第3版)


搬运下 GET&POST 两者的实际应用


1. GET的要点

  • 请求参数以‘?’分割,以‘key1=value1&k2=value2’的形式带在URL后面;
  • 请求时参数的key和value都必须使用 encodeURIComponent()进行编码;

以下是GET请求的实例:

1.确定请求参数
let reqData = {
  name:'MaBond',
  age:100,
  job:'web',
}
2. 处理url
function getFilter(obj){
  let url = '?'
  for(let key in obj){
    url += `${encodeURIComponent(key)}=${encodeURIComponent(obj[key])}&`
  }
  return url.slice(0,-1)
}
3. 发起请求
xhr.open('path'+getFilter(obj))

2. POST的要点

  • 请求参数以以‘key1=value1&k2=value2’的形式带传递到xhr.send()中;
  • 为了模拟表单形式的提交数据,需要设置Content-Type头部信息设置为 'application/x-www-form-urlencoded'

以下是POST请求的实例:

1.确定请求参数
let reqData = {
  name:'MaBond',
  age:100,
  job:'web',
}
2. 处理请求参数
function postFilter(obj){  
    let str = ""
    for (let key in obj) {
        str += `${key}=${obj[key]}&`
    }
    str = str.slice(0, -1)
    return str
}
3. 发起请求
xhr.send(postFilter(reqData))

相关文章

  • 前端 GET&POST 两种请求方式

    作者 MaBond参考 JavaScript高级程序设计(第3版) 搬运下 GET&POST 两者的实际应用 1....

  • AFN 基本使用

    GET&POST 请求 文件下载 文件上传 序列化处理 监听网络状态 GET 方式发送请求 POST方式发送请求 ...

  • Python自动化学习笔记(一)----接口测试基础

    1.1接口基础知识 1.1.1 Get&post请求 GET和POST请求: GET提交的数据会放在URL之后...

  • webpack

    前端模块加载 两种极端的方式 (1)每个模块文件都单独请求,请求次数过多,应用启动速度慢。 (2)把所有模块打包成...

  • Django2.0开发-前端导航栏切换activate改变

    目前想到两种方式实现:一种是前端完全控制、一种是后台+前端实现。 在导航栏标签位置加入js代码,判断当前请求网址,...

  • IOS GET&POST请求

    GET请求 POST请求传递json数据

  • Mybatis分页插件PageHelper

    在实际的项目开发中,常常需要使用到分页,分页方式分为两种:前端分页和后端分页。前端分页:一次ajax请求数据的所有...

  • HTTP请求中的Form Data与Request Payloa

    前端开发中要想实现与后端的交互那就少不了要向后端提交数据或请求数据,这时传参的方式主要有两种:且这两种方式主要是通...

  • basicAuth和jwt

    basicAuth前端提交方式: 》业务逻辑:前端通过basicAuth携带token请求AP,后端接受到请求,通...

  • 前端js将文件流导出为csv/excel文件

    前端将文件流导出为csv/excel文件有两种方式:1.后端直接返回文件连接:前端正常请求,后端返回一个静态文件链...

网友评论

    本文标题:前端 GET&POST 两种请求方式

    本文链接:https://www.haomeiwen.com/subject/cdebbttx.html